React Js Cours pour les débutants pour avancer (Apprendre par le fait)

1. Tout sur le cours React J: Jetez un œil à ce magnifique site Web. Tout est codé à la main avec React js à l'aide d'un framework CSS appelé tailwind. Il est conçu avec soin et professionnalisme pour fonctionner sur tous les appareils. Qu'en est-il de ce magnifique clone de Netflix ? N'aimez pas cette incroyable application de tableau de bord Reacts. Jetez un œil à ce site Web professionnel mis à jour du portfolio React JS. Alors quoi, ce serait super incroyable si vous saviez exactement comment concevoir et coder n'importe lequel de ces sites Web à partir de zéro. C'est exactement là que j'interviens. Bonjour, Bienvenue et merci beaucoup de l'intérêt que vous portez à mon nouveau React js. Parce que pour les débutants, je m'appelle, voici x et je vais être votre professeur dans ce cours. Dans ce cours, nous allons partir de zéro pour apprendre et comprendre les concepts de base. Réagissez. À la fin, vous serez bien équipé pour créer application Web complexe à l'aide de React j. Nous allons commencer par installer les outils nécessaires pour fonctionner avec React years. Ensuite, nous allons créer notre première application React. Vous n'avez donc rien à craindre , simplement parce que je vais vous tenir la main et vous expliquer les principes fondamentaux qui sont les subtilités de la collecte de React js. Et tout comme notre ensemble d'instances Bits, si vous ne pouvez pas l'expliquer simplement, c'est que vous ne le comprenez pas assez bien. Mon objectif dans ce cours est d'expliquer, réagir simplement pour que tout le monde le comprenne suffisamment bien. Par conséquent, nous allons aborder tous les concepts de base de React, y compris des sujets avancés tels que qui regarde. En effet, il s' agira d'une série complète. À la fin de ce cours, vous serez bien équipé pour créer applications Web complexes telles que le clone de Netflix, l'application React the Dashboard, application de recettes culinaires et le site Web professionnel React JS de premier ordre, que vous pouvez utiliser pour présenter vos offres d'emploi à vos clients ou à vos employeurs, y compris à vos familles et amis. Sans plus tarder, rejoignez-moi et commençons. 2. 2 Qu'est-ce que React js ?: Qu'est-ce que React exactement et pourquoi l'utiliserions-nous ? React JS est une bibliothèque JavaScript déclarative, efficace et flexible créer des interfaces utilisateur rapides et interactives. Je tiens à ce que vous souligniez ces points essentiels. Interfaces utilisateur de bibliothèques JavaScript déclaratives. Avant de poursuivre, je tiens à corriger une impression. React js n'est pas un framework. C'est une bibliothèque. Et le but pour lequel cette bibliothèque a été créée est de créer des interfaces utilisateur interactives, ce qui implique simplement de rendre la vue et de s'assurer qu'elle est synchronisée avec l'état. C'est la seule chose qu'il apporte. Et il le fait parfaitement bien. Par conséquent, React ne dispose pas d'une solution intégrée pour gérer les appels HTTP, routage et d'autres fonctionnalités. Cependant, nous pouvons gérer toutes ces fonctionnalités en installant des bibliothèques externes. Par exemple, si vous implémentez un bouton cliquez pour vous rediriger du composant a vers le composant B. Vous devez installer une bibliothèque externe appelée React router dome. Un autre point important est que React js est déclaratif. Et ce paradigme implique simplement que tu réagis comme tu veux en écrivant du code. Et avec l'aide de la bibliothèque Reactome, React mettra à jour efficacement et affichera uniquement le composant réel lorsque votre état change. Très bien, donc React aura supprimé le résumé. Ce sont des femmes ? Et vous permettre de créer plus facilement une interface utilisateur interactive et complexe ? Et maintenant, la question qui se pose est pourquoi apprendrions-nous à réagir ? Et quel est exactement l' avantage du secteur de la technologie ? Le point numéro un est la demande du marché. Lorsque vous examinez la tendance de Google, vous vous rendrez compte que React js domine le secteur de la technologie en termes de bibliothèque ou de framework pour la création d'interfaces utilisateur. Si vous souhaitez élargir vos opportunités en tant que développeur frontal, React js est l'un des meilleurs outils que vous puissiez ajouter à votre boîte à outils. Le point numéro deux est la haute performance. React utilise simplement des techniques intelligentes pour minimiser le nombre d' opérations coûteuses liées au dôme nécessaires à la mise à jour de l'interface utilisateur. Ce qui, à son tour, permet aux développeurs de créer une application Web capable de modifier les données au fil du temps sans avoir à recharger la page. Et je vous en prie, prenez-en note. Très bien, cela permet aux développeurs de créer une application Web capable de modifier les données au fil du temps sans avoir à recharger la page. Permettez-moi de vous donner rapidement une métaphore. Par exemple, l'un de vos amis a publié sa photo sur Facebook. Vous pouvez donc ouvrir l'image, puis lui donner immédiatement un aspect similaire. Vous donnez la même image. Le LikeCount sera incrémenté même sans avoir à recharger la page. Et c'est l'un des grands avantages des chaises OU portails React. Il réagit donc en quelque sorte aux changements. Mais bien qu'il ne soit pas totalement réactif en termes de communication avec la base de données, mais à l'aide de redox et d'autres outils de gestion d'état, vous pouvez démarrer l'application avec Reacts pour qu'elle soit complètement réactive. Le point numéro trois est une solide équipe d'ingénieurs. React est créé et maintenu par Mehta. Par conséquent, lorsqu'une entreprise comme metta utilise Reacts pour créer et gérer son propre produit, vous pouvez être assuré que React js ne va pas disparaître de sitôt. Cependant, certaines des plus grandes applications au monde sont conçues avec React. Des applications telles que Netflix, PayPal, Facebook, Instagram, Dropbox et bien d'autres. Dans ce cours, Netflix est donc l'une des applications que nous allons créer de toutes pièces jusqu'à la dernière étape du déploiement. Et bien sûr, Lénine, la manière de construire ce projet sera un énorme avantage pour vous. Ça a l'air bien, non ? Magnifique. Un autre avantage est sa grande communauté et sa popularité. React js possède une très grande communauté. Ainsi, chaque fois que vous rencontrez des problèmes, vous avez des milliers d'articles et bibliothèque sur Internet qui vous aideront. Vous pouvez donc le configurer sur Stack Overflow, W3 school et bien d'autres. Techniquement, le démarrage des applications avec React suit l'approche de l'architecture basée sur les composants, ce qui implique simplement des plaintes, constituent l'un des éléments de base de l'application React. Et maintenant, la question qui se pose est la qu'est-ce qu'un composant ? Le souci ? Dans la prochaine conférence, nous en discuterons en détail. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 3. 3 Composants: Composants. Le composant est une partie isolée de l'interface utilisateur conçue pour créer des interfaces utilisateur complexes. En d'autres termes, il représente une partie de l'interface utilisateur. site Web traditionnel peut être décomposé en un composant d'en-tête, mais en un composant de navigation côté conteneur et en composants de pied de page. Hein ? Alors laisse-moi le rendre plus propre. Jetez un œil au site Web de ce portfolio. Et bien sûr, il s'agit un autre grand projet que nous allons développer dans le cadre de ce cours. Maintenant, comprenons la structure et la façon dont elle a été perçue. Ce site Web de portefeuille est divisé en segments isolés plus petits appelés composants, qui incluent le composant d' accueil. Encore une fois, le composant principal est décomposé en parties plus petites , notamment le composant principal, les composants profilés et, enfin, le profilé alimentaire. Nous avons donc le reste des composants tels que les composants À propos de moi, CV, le témoignage et la composante Contactez-moi. Ainsi, tous ces composants imbriqués sont intégrés à une société racine, à savoir des nœuds technologiques. Le composant root est le composant par défaut de chaque application React. La responsabilité des composants racines est donc de servir de conteneur pour tous les autres composants qui seront créés lors de la création de l'application React. En fait, j'appelle ce composant la mère de toutes les entreprises. Et d'ailleurs, c'est mon opinion personnelle. Ainsi, en y regardant de plus près, vous vous rendrez compte que chacun de ces composants ne définit qu'une section de l'interface utilisateur. Et toute cette section est ensuite réunie pour former l' ensemble de la demande. Techniquement, si nous voulons représenter cette application sur une arborescence de composants, nous aurons en haut, le composant de l'application, qui correspond aux entreprises racines, n' est-ce pas ? Donc, ci-dessous, nous allons avoir les composants de la maison. Et le profil de la tête, le pied profilé, notre entreprise, sont imbriqués dans les composants de la maison tête, le pied profilé, notre entreprise, sont . Ensuite, nous avons les composants «  pilier », CV », « témoignage » et «  contactez-moi ». Donc, en résumé, le composant nous permet de décomposer notre application en segments encapsulés plus petits, qui peuvent ensuite être composés pour créer une qui peuvent ensuite être composés pour interface utilisateur plus complexe. Les techniques les plus simples. Au moment de l'enregistrement, des applications comme Facebook comptaient plus de 30 000 entreprises. La taille de l'application détermine donc le nombre de composants à utiliser. L'un des avantages des composants est qu'ils sont réutilisables. Ainsi, dans React js, un composant réutilisable est un élément d'interface utilisateur qui peut être utilisé dans différentes parties de l'application pour créer plusieurs instances d'interface utilisateur. Donc, en termes simples, cela signifie qu'un composant peut être utilisé avec différentes propriétés pour afficher différentes informations. Hein ? Voilà, c'est tout pour le moment. Dans la prochaine conférence, nous procéderons à la configuration et à l'installation. Restez concentré et prenez toujours soin de vous. 4. 4 Installation d'outils (nœud js, vs code, google chrome): Dans cette conférence, nous allons installer les outils nécessaires pour fonctionner avec React js, tels que Node.js. Visual Studio Code n'est tels que Node.js pas le navigateur de votre choix, mais de préférence Google Chrome. Alors rendez-vous rapidement sur Node js.org. Voici l'adresse. Donc, ici, nous allons télécharger et installer la dernière version stable. Je l'ai déjà sur ma machine. Mais pour enseigner les poivrons, je dois le télécharger et l'installer avec vous pour plus de clarté. Ainsi, lorsque vous observez l'écran, vous verrez deux versions différentes. Veuillez donc ne pas télécharger cette version. Tu sais pourquoi ? C'est simplement parce que cela comporte des complexités supplémentaires que vous ne pourrez peut-être pas comprendre. Passons donc au téléchargement du LTS. Ici, est-ce que c'est retiré de l'écran ? Je vais juste cliquer pour télécharger. La raison pour laquelle nous installons Node.js est d'utiliser le package MPM pour installer des bibliothèques tierces. Téléchargement réussi. Ouverte. Continuons. Vous pouvez décider de lire le contrat de licence du logiciel. Mais pour moi, je vais simplement continuer à être d'accord. Continuons. Enfin, nous devons appuyer sur le bouton Installer. C'est ici ? Bien sûr, si votre tasse apparaitra certainement. Il vous suffit donc de saisir votre mot de passe. Et si vous utilisez Windows, l'installation sera simple. Donc, le logiciel d'installation masqué, et non l'installation de GS, est en cours. Et cela vous prendrait certainement un certain temps. Je dois donc accélérer la conférence. Node.js est installé. Réussi. Fermons-le. Bien, vous pouvez donc décider de le garder ou de le déplacer vers le faisceau. Mais pour moi, je vais juste le garder. Ouvrons maintenant le terminal. Maintenez la touche commande de votre Mac enfoncée, puis appuyez sur la touche espace. Nous allons donc rechercher un terminal. Et le voici. Ici, nous devons vérifier la version du nœud que nous venons d'installer. Node Dash V, appuyez sur la touche Entrée de votre clavier. Et voici la version d'un cheveu. Fermez la terminologie. La solution consiste à installer l'éditeur de code. Et l'éditeur de code que je vais utiliser dans ce cours est le VS Code. N'hésitez pas à utiliser l' éditeur de code de votre choix. Mais pour moi, le VS Code est mon préféré. Et je vous suggère vivement de vous en tenir au code VS afin de ne pas pouvoir me suivre à l'avenir. Faites défiler la page vers le bas et téléchargez-le. Il s'est détaché de l'écran. Nous l'avons pour Windows et sur le bord droit de l'écran, nous l'avons pour Mark. Il ne me reste donc plus qu'à télécharger pour Mac. Et si vous utilisez Windows, vous devez également télécharger pour Windows. Le téléchargement prendrait certainement un certain temps. Je dois donc accélérer la conférence. Télécharger. Réussi. Ouverte. C'est ici. Il suffit de le lancer. Et c'est tout. Le VS Code est ouvert. Donc, de mon côté, vous allez voir le projet récent. Ne vous inquiétez pas, cela peut ne pas sembler terminé simplement parce que vous n'avez ouvert aucun projet avec VS Code. Assurez-vous donc de télécharger Google Chrome. Et bien sûr, tu devrais l'avoir maintenant. C'est tout pour le moment. Et dans la prochaine conférence, nous allons créer notre première application React. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 5. Installation à 5 réactions: Dans cette conférence, nous allons créer notre première application React. Alors rendez-vous rapidement sur React js.org. Voici l'adresse. Cliquez sur chiens. C'est ici. Très bien, donc sur la droite de l'écran, vous allez voir l'onglet. Donc, tout en haut, vous devez cliquer sur Créer une nouvelle application React. C'est ici. Donc, la première chose que nous allons faire est de générer un modèle d'application React, qui comprend les bibliothèques, les fichiers et dossiers initiaux pour exécuter une application React standard simple. Faites défiler la page vers le bas, laissez-moi vous montrer. Pour créer une nouvelle application React. Nous devons suivre ces instructions. La commande NP X serait utilisée pour créer une nouvelle application React sans avoir à l' installer sur notre système. Je n'ai pas compris tout cela. Passons à la création d'une nouvelle application React. Dirigez-vous vers le bureau. Et ici, nous allons créer un répertoire racine. Réagissez à la cause. Cliquez ici avec le bouton droit sur Nouveau dossier. Réagissez, accélérez, provoquez, appuyez sur la touche Entrée. Des techniques. Lorsque vous nommez votre projet, utilisez toujours un nom descriptif qui indique l'objectif du projet. Vous voulez donc pouvoir le reconnaître à l'avenir. Ça a l'air bien, beau. Ouvrez donc rapidement le VS Code. Fermons cette page d'exemple. Maintenant, la ligne suivante consiste à glisser-déposer le dossier dans le VS Code. Encore une fois, fermez la page d'exemple, maximisez le VS Code. Ouvrons le terminal intégré VS Code. Et je vais faire Control Back Tick. Vous pouvez voir que l'Arctic se trouve dans le coin supérieur gauche du clavier, juste en dessous de la touche d' échappement. Si le raccourci ne fonctionne pas pour vous, il vous suffit d' aller en haut, puis de domino sur le nouveau terminal. Vous cliquez dessus, il s'ouvre pour vous. Juste au terminal. Nous devons créer une nouvelle application React. Et p x Create React app. L'application React sera installée dans un répertoire appelé Klein's. Et vous pouvez également décider de changer le nom de ce répertoire. Mais je vous recommande vivement de vous en tenir au client de convention simplement parce que React js concerne le frontend, ce qui implique la partie interface utilisateur de l'application. Vous pouvez aussi limiter le front end comme celui-ci. C'est donc également conventionnel. Ça va ? Mais pour moi, je vais simplement m'en tenir à la chaleur conventionnelle sur la touche Entrée pour continuer. L'installation de React est en cours. Et cela prendrait certainement un certain temps. Je dois donc accélérer la conférence. React a été installé avec succès. Pour continuer, nous devons entrer dans le répertoire client où nous avons installé le React js. Je vais donc juste appuyer sur la touche d' impact C, D, Klein pour continuer. La prochaine étape consiste à démarrer le serveur de développement frontal. Et je vais faire npm, commencer à appuyer sur la touche Entrée pour le faire démarrer. Et d'ailleurs, MPM signifie simplement Node Package Manager. La page React London s'affiche à l'écran. Et par défaut, il s'exécute sur le port 3 000 de localhost. Nous avons donc terminé l'installation. Dans la prochaine conférence, nous commencerons à dévoiler le standard React. C'est tout pour le moment et à la prochaine conférence. Restez concentré et prenez toujours soin de vous. 6. 6 Plaque d'ébauche: Dans cette conférence, nous allons également dévoiler la commande B standard de React pour ouvrir l'Explorateur. Nous devons également fermer le terminal. Vous devez donc cliquer sur l'icône située sur le côté droit de l'écran. Mais pour moi, je vais juste reprendre le contrôle. Ouvrez le répertoire client. C'est ici ? Passons au fichier package.json. C'est ici ? Le fichier package.json est l'endroit où se trouvent toutes les dépendances concernant le frontend. Par ici. Nous avons réagi aux aides visuelles et la version 0.2 a été installée. Juste en dessous. Nous avons le dôme du réacteur. Le dôme des réactifs est utilisé pour travailler avec le module d'objet du document dans le navigateur. Nous avons ici les scripts React sur le Web Vitals. Et ici, nous avons les scripts. Et dans la conférence précédente, nous avons fait démarrer MPM pour démarrer le serveur de développement frontal. Juste en dessous, nous avons le visualisé. Lorsque nous exécutons npm run build, cela détruit les actifs statiques pour les déploiements. Ainsi, lorsque nous voulons déployer une application sur le serveur, nous utiliserons certainement la vue. Ici. Nous avons le test. En cours d'éjection. éjection est nécessaire lorsque vous souhaitez effectuer une éjection depuis Create, React, l'application et personnaliser votre parc Web. Et voici la configuration des voies ES, ce qui permet de mettre en évidence certaines erreurs possibles dans votre code. Enfin, nous avons le navigateur compatible le moins utilisé avec le fichier package.json. Passons au journal du package. Ouverte. Le package Log Hubs pour une installation stable de la porte de vos dépendances. Nous n'avons rien à faire ici, mais nous devons également en parler. Nous avons ici le fichier Redmi point md, qui aide à la documentation. Par exemple, vous avez terminé de créer votre application. Vous pouvez donc accéder au point Redmi vide trouvé pour documenter les processus impliqués. Dévoilons donc rapidement les dossiers. Ouvrez le public, d'accord. Dans le répertoire public, nous avons le fichier index.html, le logo et le fichier JSON manifest point. Le fichier JSON à points manifestes est utilisé pour Progressive Web App qui, pour instant, n'est pas pertinent par rapport à l' objectif de ce cours. Donc, en tant que débutant, nous devons nous concentrer sur le point d'index HTML. Et le voici. C'est tout pour le moment et à la prochaine conférence. Concentrez-vous sur les soins holistiques. 7. 7 Comment réagir sous la capuche: Dans cette conférence, nous allons comprendre le flux de React en tant qu'application d'une seule page, ce qui implique comment React JS fonctionne sous le capot. Ouvrez rapidement la commande B du fichier index.html pour ouvrir l'explorateur. Les clients sont publics et le code HTML à points d'index est flou. Allons-y pour ouvrir le fichier index.js et l'application. Passez à la source, qui est l'index SRC point js sur lequel se trouve, n'est-ce pas ? Enfin, nous devons ouvrir la commande app js B pour fermer l'explorateur. Commençons par le fichier index.html. Faites défiler vers le bas. Je veux que vous preniez note de ce div avec l'identifiant root. C'est extrêmement important. En fait, ce div avec l'identifiant de route sert de conteneur à l'application empire. Passons au fichier index.js. Le fichier index.js est le point d'entrée de chaque application React. Pour une meilleure explication. Avant de poursuivre, nous allons rétrograder l' application vers React 17. Et puis j'en ai fini avec l'explication. Nous allons le ramener pour réagir, en mangeant directement en ligne pour faire comprendre au client qu'il l'efface. Par ici. Surlignez, essuyez-le. plus, nous devons à nouveau surligner la commande X pour placer une virgule ici et la coller. Nous devons donc retirer le point-virgule, les crochets de cet autre support ici. Nous devons donc supprimer la racine. Nous allons utiliser le dôme du réacteur pour le copier, le coller ici. Il suffit de cocher le mode strict. Magnifique. Nous avons maintenant réussi à rétrograder l'application vers React 17. Tout ce que je veux que vous fassiez pendant cette conférence, c'est de vous asseoir tranquillement et d'accorder le maximum d'attention à mon explication. Passons à la compréhension fonctionnement de React JS sous le capot. En haut, nous avons importé React depuis le module React. Ci-dessous. Nous avons React DOM de React au module. Le React DOM permet de relier le dôme de bas niveau du HTML au dôme de haut niveau de React. De plus, le dôme React possède une méthode appelée render. Et la méthode aléatoire prend en compte deux paramètres. Le premier paramètre concerne les éléments, qui dans ce cas sont des éléments de réaction à afficher. Le second paramètre est un code JavaScript standard, qui est Document.getElementById. Et ça dit : « Hé, je vais créer un lien avec l'élément DOM dans le code HTML ». Précisément. Un élément DOM soudain avec l'identifiant des racines. Et cet élément DOM avec l'identifiant des racines se trouve directement dans le fichier HTML. Donc, ce qui fait réagir les portes, c'est d'injecter le premier paramètre dans l'élément DOM avec l'identifiant des racines. En toute simplicité, tout ce que vous avez ici comme premier paramètre sera transmis au nœud DOM racine. Il sera placé juste au sein de cette division. Et surtout, le fichier index.html est la seule page enregistrée dans le navigateur afin d'afficher tout ce que vous transmettez en tant que premier paramètre dans le nœud DOM racine. Très bien, donc cette approche afficher les composants sur une seule page et à modifier le dôme en exaoctets le comportement sur une seule page. On peut donc dire que React js est utilisé pour créer une application d'une seule page. Permettez-moi de revenir à l'index j. Donc, ici, je vais supprimer composant de l'application comme premier paramètre, l'effacer. Donc je vais porter une étiquette sur la tête, non ? Nous sommes dans le headtag. Je vais le faire. Maintenant, enregistrons l'application pour voir ce qui se passe. Sûr. Boum. Pouvez-vous voir l'en-tête d'un tag affiché sur le navigateur. Donc, lorsque nous inspectons l'élément. Cliquez sur Inspecter. Ici, vous allez voir le fichier index.html, qui est la seule page enregistrée dans le navigateur. Essayons donc d' ouvrir le corps. Lorsque vous ouvrez le corps, vous allez voir le div avec l'identifiant root. Ouvrons donc rapidement ce D. Pouvez-vous voir que la balise head one est injectée directement dans ce div avec l'identifiant root ? C'est aussi simple que cela. Compris, magnifique. Allons-y encore une fois. Elle, non ? Donc, tout ce que vous avez ici comme premier paramètre sera injecté correctement, entre le div avec l'identifiant des racines et le diff avec l' idée de racines se trouve ici dans le fichier index.html. Le fichier index.html est donc la seule page enregistrée sur le navigateur afin d'afficher tout ce que vous avez injecté entre le dv. C'est pourquoi, lorsque vous inspectez la console, vous verrez la balise head one entre le div avec l'identifiant d'un root. La meilleure explication, c'est devenir bon. Magnifique. Encore une fois, revenez à l'index de code VS dot js. Effacons-le donc et rétablissons le composant de l'application. Et d'ailleurs, le composant de l'application est importé en haut. Et lorsque vous enregistrez sur le navigateur, boum. Et vous allez voir la page de Londres. Dévoilons l'application Back to VS code up dot js. Et ici, dans les objets, nous avons un div avec le nom de classe de notre application. Et nous avons un Herder ici. Nous avons ici la balise IMG qui décrit ce logo qui tourne continuellement sur l'écran. Nous avons le tag p. C'est ici ? Enfin, nous avons le tag A. C'est ici. Donc, ici, nous avons le corps, et voici le div avec l'identifiant root. Ouvrons-le. Pouvez-vous voir que lorsque vous ouvrez le div avec l'identifiant root, vous allez voir un autre div avec le nom de classe up. C'est ici ? Ouvrons le div. Nous allons voir l'en-tête avec le nom de classe de l'en-tête de notre application. Et le voici. Ouvrons l'en-tête. Nous avons donc le reste du contenu tel que la balise IMG, qui décrit le logo. Nous avons le tag p. Tu peux voir ? Et enfin, nous avons le tag A, c'est aussi simple que cela. Ramenons rapidement l' application à React 18 index.js. Ensuite, il ne nous reste plus qu'à annuler. Maintenant, nous avons de nouveau mis à jour l'application pour réagir. 18 ans, c'est exactement la même douleur. Le composant de l'application se trouve ici en tant que premier paramètre, et il va passer par cette ligne de code dans le div avec l'identifiant des racines. Et vous devez toujours vous rappeler que le div avec l' identifiant root est amusant ici dans le fichier index.html. Et le index.html est la seule page enregistrée sur le navigateur afin d'afficher le contenu que vous injectez entre ce div et c'est tout. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré sur « prenez toujours soin de vous ». 8. 8 jsx: Dans cette conférence, nous allons comprendre les GSA. Alors, passez rapidement à la commande P de l'application Js pour faire apparaître ce petit champ de recherche en haut, puis définissez le point J pour AARP, c'est là, n'est-ce pas ? Si le raccourci ne fonctionne pas pour vous, il vous suffit de naviguer vers l'Explorateur , puis d'ouvrir Mixte pour ouvrir le client SRC. Et puis le voici. J'ai fermé l'explorateur. Magnifique. Donc, directement à l'écran, nous avons une fonction qui renvoie une partie de l'interface utilisateur. Donc, tout ce que vous voyez ici s'appelle DSS. Dss est simplement l' abréviation de JavaScript XML. Il s'agit d'une extension syntaxique de JavaScript utilisée pour définir le sens et la structure de votre contenu Web. Ils peuvent donc sembler familiers avec le HTML, mais ce n'est pas du HTML. Ce que vous voyez à l' écran s'appelle GSA. L'une des différences entre HTML et Jesus est l'attribut du nom de classe. En HTML, il s'agit d'une classe. Et ici, dans celui de Jess, c' est un nom de classe simplement parce que class est un mot clé réservé en JavaScript. Donc, toute cette maquette ici définit la page de Londres, qui comprend le logo, la balise p et la balise a. Laissez-moi vous montrer rapidement. Revenons au code VS. Voici la balise IMG qui décrit le logo. Je suis là, est-ce juste en dessous ? Nous avons le tag p. C'est ici. Et enfin, nous avons le tag « a » ici. Est-ce un retour au code VS ? Donc, lorsque j'essaie de tout supprimer, directement dans cette division, nous allons faire l'expérience d'un nouveau comportement. Je vais surligner la balise d'en-tête d'ouverture à la balise d'en-tête de fermeture. Essuyez-le. Sûr. C'est le nouveau comportement. L'écran est vide simplement parce que nous avons supprimé les expressions GSS qui définissent la page de Londres. Revenons à VS Code. Et nous devons également supprimer le div avec le nom de classe de notre application. Nous voulons tout faire à partir de zéro. Nous allons donc avoir un en-tête, puis un mot bonjour, enregistrer sur le navigateur. Hé, c'est ça ? Est-ce que c'est beau ? Ainsi, la balise « head one décrit le HelloWorld que vous voyez ici sur le navigateur. C'est aussi simple que cela. Revenez au code VS et continuons. Maintenant, permettez-moi de zoomer sur la France sur les principaux points clés que vous devez garder à l'esprit lorsque vous utilisez les GSA. Dans tous ces points clés que je souhaite partager avec vous ils sont extrêmement importants. Point. Premièrement, vous ne pouvez avoir qu' un seul élément d'emballage parent en Jésus. Donc, lorsque vous faites quelque chose comme ça, par exemple , utilisons un hashtag et je m'en chargerai. Je m'appelle Barbara. Cela provoquerait donc certainement une erreur. Lorsque vous enregistrez et quittez le navigateur, vous verrez la plainte. Cela dit que je viens d'envoyer Jésus. Les éléments doivent être emballés dans une étiquette, ce qui implique que vous ne pouvez pas avoir celui de Jess en dehors d'un autre GSA. La seule façon d'y parvenir est donc d' intégrer tout Jésus dans un élément parent. Alors, faisons un DVD ici. Alors. Nous allons le surligner, maintenir la touche Alt de votre clavier enfoncée, appuyer sur la flèche vers le haut pour la déplacer. Et comme vous pouvez le constater, l'erreur a disparu. Gardons le code propre. Magnifique. Le paiement, le navigateur, tout fonctionne comme prévu. J'adore ça. Revenez. Ce dv sert donc d'élément parent. Vous ne pouvez donc pas avoir d'éléments de gestes en dehors d'un élément JSX parent. Donc, quand je fais quelque chose comme ça, par exemple quand j'ai un div ici, cela va générer une erreur. Je viens d'envoyer l'élément à Jésus qui doit être emballé dans une étiquette. Cela implique donc simplement que toutes les expressions gestuelles doivent être regroupées dans un élément parent. Donc, pour l'instant, ce div est utilisé comme élément parent. Il suffit de le déplacer comme si c'était aussi simple que cela. Point numéro deux. L'attribut de classe en HTML est remplacé par le nom de classe dans les GSA, simplement parce que la classe est un mot clé réservé en JavaScript. Essayons donc de donner un nom de classe à ce div. Le nom de classe est container. Enregistrer. Sur le navigateur. Tout fonctionne parfaitement bien. Inspectons donc rapidement la console. Commande I pour ouvrir la console. Tu vois que tout va bien ? Revenons au code VS. Essayons donc de remplacer le nom de la classe par class save dans le navigateur. Voici l'avertissement dans une classe de propriété DOM valide. Et il a posé une question. Vous vouliez dire un nom de classe ? Oui. Nous voulons dire un nom de classe. Je dois donc revenir en arrière puis économiser. Jetez-y un œil. Actualisons la console. Tout fonctionne parfaitement bien. Point numéro trois. Jusqu'à présent, Gmail est remplacé par HTML4 dans Jesus. Et pour est également un mot clé réservé en JavaScript. Donc, lorsque nous avons essayé d'implémenter quelque chose comme ça, ici même, nous allons avoir une étiquette. Et spécifions l' attribut for, equa, nom d'utilisateur. Cela fonctionne donc pour le HTML. Et lorsque vous l'essayez sur GSA, recevrez certainement un avertissement sur la console. La propriété « pas quatre » n'est pas valide. Viens ici. Nous devons changer cela pour deux, HTML4. Cela résoudra donc le problème. Sûr sur le navigateur. Actualisez la console. Tout va bien. Troisième point : dans celui de Jess, le bouton onclick en haut, les attributs d' index seront écrits en virgule, ce qui implique simplement que vous mettiez en majuscule la première lettre de chaque mot à l' exception du premier mot. Supposons donc que nous voulions implémenter un bouton ici. Ensuite, nous devons spécifier leur propre clique. Si vous le remarquez, vous vous rendrez compte que l'onclick est également écrit en cas de karma. Nous l'avons mis entre crochets à un collègue. Voici donc comment implémenter le OnClick dans les GSA. Pour récapituler, la classe en HTML est remplacée par le nom de classe dans les GSA. Car le HTML est remplacé par l'historique, et c'est pourquoi, dans jazz, le gestionnaire d'événements onclick de Jessie's est écrit en virgules et il est également dit à un collègue entre crochets. Vous pouvez donc appeler ici n'importe quelle fonction que vous avez définie dans l'application. Je vais juste l' effacer pour l'instant parce qu'à l'avenir, nous allons traiter le gestionnaire d'événements à De Dios, l'effacer. Enfin, vous ne pouvez pas avoir d' aspirations en matière de GSS en dehors des éléments parents. Ainsi, tous les gestes expressions que vous allez avoir lors de la création votre interface utilisateur seront regroupés dans un seul élément parent. Nous devons donc l'emménager. C'est ça. C'est tout pour moment et à la prochaine conférence. Restez concentré et prenez toujours soin de vous. 9. 10 types de composants: Nous en avons maintenant terminé avec JSX. Mais c'est extrêmement important, vous savez, si je veux faire un commentaire sur les gestes, les expressions. Comment puis-je m'y prendre ? Technique, par exemple, je souhaite placer un commentaire sur l'historique. Comment puis-je y parvenir dans les GSA ? Le raccourci pour ce faire consiste donc à sélectionner précisément les éléments GSS sur lesquels vous souhaitez placer un commentaire. Et dans ce cas, je vais mettre un commentaire sur le tag H2. Il ne vous reste donc plus qu'à sélectionner. Laisse-moi te le montrer à nouveau. Sélectionnez et maintenez la touche de commande de votre clavier enfoncée, puis touchez la barre oblique. Et cela placera précisément un commentaire sur l'expression de Jess que vous avez sélectionnée. Si vous remarquez, vous vous rendrez compte que tout est entre crochets Ecoli ici, d'accord ? Et à droite, entre crochets, vous pourrez utiliser les commentaires multilignes. Voici donc le commentaire multiligne d'ouverture. Voici le commentaire multiligne final. Donc, en termes simples, pour utiliser les commentaires dans celui de Jess, vous devez les placer entre crochets. Ainsi, lorsqu'il est placé entre crochets, React js le traitera comme des expressions JavaScript. Vous pouvez désormais utiliser les commentaires multilignes qui s'y trouvent. en va donc de même si vous souhaitez supprimer le commentaire, les surlignements. Maintenez la touche de commande appuyez sur la barre oblique. C'est aussi simple que cela. Même si vous souhaitez faire un commentaire sur l'ensemble de Jesse, le processus est exactement le même. Supposons que je veuille placer un commentaire sur tout, pas sur l'élément parent. Je dois donc juste le surligner comme ceci, la touche de commande enfoncée. La barre oblique est aussi simple que cela. Et aussi, si vous souhaitez supprimer les commentaires, surlignez, maintenez la touche commande enfoncée, appuyez sur la barre oblique. C'est donc exactement ainsi que les commentaires apparaissent dans les GSA. Je vois que vous avez apprécié cette conférence. Concentrez-vous sur les soins holistiques. 10. 9 Commentaire dans Jsx: Nous avons déjà parlé compétence et nous pensons que les composants sont réutilisables et qu'ils peuvent également être imbriqués dans un autre composant. Maintenant, la question qui se pose est comment les compétences se traduisent-elles en code dans notre application ? La manière la plus simple de définir un composant est d'écrire une fonction JavaScript simple. Dans React G is, nous avons deux types de plaintes. Composants fonctionnels et entreprises de classe. Composants fonctionnels ou fonction JavaScript. Mais acceptez les sondes comme argument, puis renvoyez un GSA valide, Electro Sense étant la maquette qui décrit l'interface utilisateur. En termes de simplicité, la syntaxe ressemblera à ceci. Cette fonction est un composant fonctionnel React valide simplement parce qu'elle accepte un seul argument d' objet sonde avec des données et renvoie un élément React. Donc, si nous devons faire la même chose en utilisant le composant de classe, la syntaxe ressemblera à ceci. Du point de vue de React. Les deux composantes ci-dessus sont équivalentes, mais seule cette composante de classe est généralement irrégulière. Classes Es6 qui colorent une classe compétente de la bibliothèque React. Et il doit avoir une méthode aléatoire qui renvoie le Jess, qui à son tour décrit l'interface utilisateur. Cependant, dans ce cours, nous allons nous en tenir à l'entreprise fonctionnelle simplement parce qu'il est extrêmement facile de raisonner. De plus, la composante de classe s'estompe progressivement. La majorité des entreprises réécrivent actuellement l'application avec des composants fonctionnels. Nous devons donc absolument suivre les tendances. Utilisation du composant fonctionnel. Nous n'avons pas à nous soucier l'état, car à l'aide de crochets, nous ne pourrons pas utiliser l'état et les autres futures de React sans écrire de classe. Et les crochets ont été introduits en 2018. Technique de conférence React. Lorsque vous nommez vos composants, utilisez toujours la convention des condiments antérieurs, ce qui implique de mettre la première lettre de chaque mot en majuscule . Ainsi, par exemple, les composants Home seront écrits comme ceci. Si vous le nommez ainsi, React js, nous le traiterons comme un parc à dômes. Magnifique. Mais le fait est qu' un code de composant est généralement écrit dans un fichier JavaScript avec une extension point js ou une extension point CSS. Mais dans ce cours, nous nous en tiendrons à l'extension dot js, par exemple les composants domestiques seront écrits comme ceci. Home Components Dot. Très bien, c'est tout pour le moment. Et dans la prochaine conférence, nous allons créer nos premiers composants fonctionnels React. Rendez-vous lors de la prochaine conférence. 11. 11 Créer notre premier composant fonctionnel: Allons-y pour créer un composant fonctionnel. Pour continuer, nous devons créer le répertoire des composants. Ouvrez le client. Au sein de la SRC. Nous devons cliquer avec le bouton droit de la souris, puis créer un nouveau dossier. Et je vais l' appeler composants. Remarquez que j'ai utilisé un mot au pluriel ici. C'est simplement parce que nous allons avoir tellement de composants, est-ce pas, dans le répertoire de ce composant. Il devrait donc être judicieux de le nommer avec Pleura Road Pizza sur la touche Entrée. Ensuite, nous sommes dans le répertoire Components. Nous allons créer le fichier des composants. Cliquez avec le bouton droit sur les composants ici sur Nouveau fichier. La phrase du composant de démonstration Dots J. Je veux que vous preniez note de la dénomination conventionnelle utilisée pour nommer ce composant. C'est ce qu'on appelle la convention de dénomination Pascal. Cela implique que vous mettiez en majuscule la première lettre de chaque mot. Et je veux aussi que vous preniez note de la tension. Ici, le point g est appuyé sur la touche Entrée et passez à la commande B pour fermer l'explorateur. Donc, ici, nous allons créer le composant fonctionnel à partir de zéro. Nous devons donc d'abord importer React depuis le module React. Pour l'instant, c'est facultatif. Très bien, donc en termes de code, les composants sont simplement des fonctions JavaScript. Et le nom de ce composant est composant de démonstration. Le composant fonctionnel renvoie le balisage JSX, qui décrit l'interface utilisateur. Nous allons avoir une division, non ? Au sein de la division, nous allons avoir un headtag et je vais vous dire bonjour à tous. C'est donc le plus simple. Nous avons maintenant réussi à créer notre composant fonctionnel. La prochaine étape consiste à l'afficher sur le navigateur. Pour que ce composant soit affiché sur le Web. La première chose que nous allons faire est d'exporter le composant. Donc, ici, je vais faire une exportation de la fonction par défaut, du composant de démonstration. Je n'ai donc pas exporté la fonction. Nous devons afficher le composant de démonstration directement dans l'application. G est la commande P pour faire apparaître le champ de recherche en haut. Et nous allons chercher. C'est ici ? Nous allons donc faire deux étapes. La première étape consiste à importer le composant de démonstration. Ici, nous devons importer des composants de démonstration à partir de guillemets simples ouverts et fermés, ou vous pouvez également utiliser des guillemets doubles. Nous devons donc cibler ici le répertoire dans lequel se trouve le composant de démonstration. Donc, pour cela, je vais créer des composants à points et des barres obliques. Le composant de démonstration est aussi simple que cela. Je n'ai pas fait ça. Nous devons afficher ce composant directement dans la déclaration de retour. Donc, ce que je vais faire maintenant, c'est surligner les lignes 9 à 13, et les effacer. Nous devons donc afficher le composant de démonstration juste entre ce div avec le nom de classe du conteneur, puis le fermer. Si nous n'avons pas d' enfants entre les étiquettes, ce serait bien d'utiliser l'étiquette à fermeture automatique. Je vais donc surligner la balise de fermeture, l' effacer juste entre crochets. Je vais juste spécifier la barre oblique. C'est ce que l'on appelle l'étiquette à fermeture automatique. Sûr. Sur le navigateur. Boum, tout fonctionne comme prévu. Et ici, vous voyez le mot bonjour. Rebonjour. Nous avons maintenant créé avec succès les composants fonctionnels et les avons affichés sur le Web. Félicitations. C'est tout pour le moment et à la prochaine conférence. Concentrez-vous sur les soins holistiques. 12. 12 types d'exportation: Ax6 propose deux méthodes différentes pour exporter des modules à partir d'un fichier , à savoir l'exportation par défaut et l'exportation nommée. Lorsque vous observez l'écran, vous vous rendrez compte que nous exportons ce composant en tant qu'exportation par défaut. Très bien, l'exportation par défaut nous permet d'exporter un module et de spécifier n'importe quel nom pour ce module chaque fois que vous souhaitez l'importer. Donc, puisque nous avons exporté le composant de démonstration en tant qu'exportation par défaut ici, nous pourrons lui donner n'importe quel nom. Très bien, alors prenons, par exemple je vais juste effacer tout ça et ensuite je vais créer des composants de la grille. Et ici, nous devons également faire de même. Nous devons effectuer le rendu des grilles, des composants, des checkouts. Tout fonctionne comme prévu. Cela ne peut donc fonctionner que si vous utilisez l'exportation par défaut. Un autre point important à garder à l'esprit est qu' il n'existe qu'une seule exportation par défaut par module. Donc, ici, dans ce composant, nous ne pourrons plus avoir d' exportation par défaut. Vous ne pouvez avoir qu'une seule exportation par défaut dans un module. Ça a l'air bien, Beautiful. Maintenant, la ligne suivante est l'exportation nommée. Les exportations nommées sont utiles pour exporter plusieurs valeurs. Et lors de l'importation, il sera possible d'utiliser exactement le même nom pour faire référence à la valeur correspondante. Laisse-moi te montrer rapidement. Donc, ici, si nous voulons utiliser l'exportation nommée, tout ce que nous avons à faire est de surligner la valeur par défaut ici, puis de l'effacer. Cela a été transformé en exportation nommée. Donc, lorsque vous enregistrez sur le navigateur, voici la plainte. Il essaie de dire que le composant réseau n'existe pas. Retournez à VS Code, dirigez-vous vers l'application js. Ensuite, nous devons utiliser exactement le même nom que le module. Et ici, le nom du module est « composant de démonstration », accédez directement à l'application. Donc, pour travailler avec l'exportation nommée, nous devons placer exactement le même nom entre crochets. Juste ici. Nous allons avoir un crochet bouclé. Alors je vais juste l'effacer. Hein ? Entre crochets, nous devons importer précisément le module par son nom, et le nom est composant de démonstration. Cela fait, nous devons également importer le composant x hat ici, le surligner, l'effacer, puis je vais créer le composant de démonstration. Découvrez-le sur le navigateur. Tout fonctionne comme prévu. J'adore ça. Très bien, pour récapituler, lorsque vous utilisez l'exportation par défaut, vous ne pourrez pas spécifier de nom à manger lorsque vous souhaitez l'importer. Et vous ne pouvez avoir qu'un seul module de paire d'exportation par défaut. Par rapport aux exports nommés, où nous pouvons exporter plusieurs valeurs à partir d'un module. Lors de l'importation, il sera possible d'utiliser exactement le même nom pour faire référence à la valeur correspondante. Il s'agit souvent d' une lecture synchrone. Concentrez-vous sur les soins holistiques. 13. 13 accessoires: Nous en venons maintenant à parler peut-être sans mentionner les composants. Plus tôt dans les conférences précédentes, nous avons appris que ce composant vous permet de diviser les interfaces utilisateur en segments indépendants et réutilisables. Donc, pour l'instant, je veux que vous pensiez à chaque segment séparément. La question est la suivante : si les composants sont séparés les uns des autres, comment transmettre les informations du composant a au composant B ? Ici, c'est à Lee que les sondes entrent en jeu. Alors, ce que c'est exactement, peut-être, représente des propriétés. Il s'agit d'un objet qui stocke la valeur d'un attribut d'attaque. Et peut-être aussi vous permet de transmettre des données d'un composant à un autre. Précisément d'un composant parent à un composant enfant. Prenez note de ces points clés. Les accessoires sont immuables, ce qui implique simplement que leur valeur ne peut pas être modifiée. Je n'ai pas compris tout cela. Dirigez-vous vers VS Code et c'est moins pratique car il est rapide. Débarrassons-nous rapidement du bandeau. Passe au composant de l'application. Par ici. Je dois juste changer le nom de la classe en app simplement parce que je veux utiliser le fichier CSS par défaut. Un autre point important que je souhaite que vous preniez note est que nos attributs peuvent être transmis à un VGS compétent. Par exemple, nous voulons transmettre les données du composant App au composant de démonstration. Pour ce faire, nous devons d' abord spécifier les attributs. Supposons donc que nous voulions transmettre un nom aux sondes. Donc, ici, l'attribut va être nommé, attribuez-lui une valeur. Marguerite. Voici donc l'attribut. Voici la valeur sur. L'ensemble de ces éléments est appelé sondes. Cela fait, nous avons réussi à faire passer des sondes dans le composant de démonstration. Mais lorsque vous consultez le navigateur, rien ne se passe. Vous ne pouvez donc rien voir sur le navigateur. Tu sais pourquoi ? C'est simplement parce que nous devons également recevoir les sondes, n'est-ce pas ? Dans la société de démonstration, il est très simple de revenir composant de démonstration VS Code au composant de démonstration VS Code pour recevoir les sondes . Tout ce que nous avons à faire est de prendre une sonde comme argument, n'est-ce pas, dans la fonction. Je vais donc faire des sondes. Vous pouvez décider de remplacer le nom des sondes par un autre nom. Mais je vous suggère vivement de vous en tenir aux sondes de conversion car c'est la convention largement utilisée par les développeurs. Cela fait, nous avons réussi à recevoir les sondes ici même dans le composant de démonstration. Laisse-moi te montrer. Donc, ces accessoires seront stockés ici à l'intérieur de l'objet accessoires. Laisse-moi te le prouver. Viens ici. Alors. Nous allons enregistrer les accessoires de console. Nous voulons donc voir la valeur stockée dans cet objet accessoire. Accédez au navigateur. Inspectons rapidement la console. Utilisez la commande Alt I pour ouvrir la console. Lorsque vous inspectez la console, vous verrez un objet. Ouvrons donc rapidement l'objet. Juste ici. Nous avons dans l' objet et le nom de l'attribut la valeur Daisy. Donc, techniquement, nous avons reçu les sondes dans le composant de démonstration. Le nid et le ln permettent d'accéder à la valeur des accessoires et de l' afficher sur le navigateur. Donc, si nous voulons accéder à la valeur des sondes, il suffit de cibler les attributs, puis la valeur sera affichée directement dans le code VS. Et faisons-le rapidement. Donc, ici, je vais spécifier une balise Hadrien parce que je veux faire directement dans la balise d'en-tête h1. Donc, d'habitude, je vais utiliser Props Dot Name sur le navigateur. Vous allez voir des sondes portant ce nom simplement parce qu'elles ont été traitées comme des tests. Donc, pour que cela fonctionne, nous devons saisir les crochets, puis surligner la commande X pour la copier-coller ici. Ainsi, lorsque vous le placez entre crochets, l'analyseur JSON sera capable de le reconnaître comme expression JavaScript au lieu d' un avant-goût sûr sur le navigateur. Ici, nous avons Daisy. Très bien, ajoutons-le rapidement au code VS et ajoutons autres attributs pour le composant de l'application Component Tree. Et voici le nom des accessoires. Maintenant, nous allons avoir d'autres sondes. En tant que pays, attribuez-lui la valeur Brésil, sûr. Sur le navigateur. Vous les verrez certainement à l'écran. Mais lorsque vous inspectez la console, vous verrez le nom Daisy et le pays, le Brésil. Faisons donc en sorte qu'il s'affiche rapidement sur le navigateur. Retour au composant de démonstration de VS Code. Et puis ici, je vais faire Props Dot Country, en toute sécurité sur le navigateur. Et nous y sommes arrivés, au Brésil. Très bien, alors rendons-les plus significatifs. Viens ici, juste dans la balise d'en-tête h1. Je vais faire en sorte que je sois un nom de point provenant de sondes, de ce pays. Sûr sur le navigateur. Je suis Daisy du Brésil. Comme elles sont magnifiques. Très bien, alors continuons. Revenez ici. Nous avons maintenant réussi à transmettre les sondes d'un composant parent aux composants enfants. Donc, pour récapituler, lorsqu'il s'agit de sondes, trois étapes sont nécessaires. La première étape consiste à envoyer les sondes. C'est vrai, Jess possède des attributs dans le composant enfant. Et la deuxième étape consiste à recevoir les sondes, d'accord, avec le paramètre d'une formulation. Et après cela, nous devons afficher sur le navigateur, c'est aussi simple que cela. Bien, maintenant je veux que vous vous rappeliez que les composants sont réutilisables. Passez rapidement aux objets et laissez-moi vous apprendre à réutiliser ce composant. Réutilisez ce composant, je vais juste le surligner, puis le dupliquer autant de fois que je le souhaite sur le navigateur. Nous avons maintenant réutilisé ces composants mais des sondes. C'est l'une des beautés de React qui me fait tourner la tête. Un autre point important est donc que le composant réutilisable peut être réutilisé avec différentes propriétés pour afficher différentes informations conservées dans le code VS, et faisons-le rapidement. Contre Code. Ici. Cet attribut est également appelé propriété. Je souhaite modifier la valeur de l'attribut. Ici, je vais atteindre mon objectif, et mon objectif vient des États-Unis. Modifiez l'attribut ici. Sahel. Le Sahel vient de l'Inde. Enfin, nous allons m'offrir un bar double. Et ils le font. Baba vient du Royaume-Uni. Sur le navigateur. Tu peux voir ça ? Nous avons ici DC du Brésil, Michael de l'USC, Sahel de l'Inde. Et enfin, sa barre d'outils du Royaume-Uni. Cela illustre le fonctionnement d'un composant réutilisable avec les sondes. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 14. 14 Props.children: Accessoires Dot JHU Drain. Si vous regardez de plus près, vous remarquerez que nous utilisons étiquette à fermeture automatique pour tous ces composants. Pourquoi ? C'est simplement parce que les composants n'ont pas d'enfants. Dans React, G est un composant avec des enfants, toujours identifié par une balise d'ouverture et une balise de fermeture. Et les enfants doivent être placés entre les étiquettes qui les entourent. Disons que nous voulons ajouter quelques informations sur ce gars, y compris sa photo de profil. Tout va bien, alors je vais d'abord effacer l'étiquette à fermeture automatique, puis la fermer avec l'étiquette de fermeture proprement dite. Et le voici. Il s'agit donc de la balise de fermeture utilisée lorsque le composant a des enfants. Et dans ce cas, ici, nous allons avoir une balise p. Et bien, dans cette balise p, je vais le faire ici, nous allons avoir une autre balise P. Enfin, je vais le faire, nous allons avoir une photo de profil. Pour travailler avec des images. Tout d'abord, nous devons importer cette image. Il existe donc plusieurs moyens de le faire. Je vais utiliser la commande B pour ouvrir l'explorateur directement dans le SRC. Nous allons créer un nouveau dossier. Et ce seront des images capturées. Alors, dans ce dossier d'images, nous allons importer la photo de profil. Donc, ce que je vais faire maintenant, c'est maximiser le VS Code. Et ici, sur mon bureau, vous allez voir le répertoire des matériaux de base. Cliquez pour ouvrir. Et d'ailleurs, ce répertoire se trouve juste là dans la description. Et voici la photo de profil. Je vais donc simplement le faire glisser directement dans le répertoire des images. Vous pouvez voir ici la photo de profil. Maximisez la commande VS Code B pour fermer l'Explorateur , puis fermez également la photo de profil. Donc, tout en haut, nous devons importer les pics de profil à partir de. Nous devons donc cibler le SRC, directement dans le SRC, nous avons le répertoire des images. Juste à l'intérieur des images, nous devons cibler précisément la photo de profil. Photos de profil point PNG. Je pense que c'est correct, non ? Alors vérifions-le rapidement. Commande B. Ici, nous avons le profil de cochons point PNG. C'est tout à fait correct. Alors faites défiler la page vers le bas et nous allons avoir une balise IMG car RC équivaut à cette entrée ici. Nous devons donc appeler cela Importer une copie, venir ici, coller, fermer la balise IMG. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur, vous verrez les enfants comprendre pourquoi. C'est simplement parce que nous devons également récupérer rapidement les sondes d'héroïne pour les enfants vers le composant de démonstration de VS Code. Donc, ici, nous allons récupérer les sondes pour enfants. Faisons-le donc directement dans la balise H2, ouvrons et fermons le crochet bouclé. Donc, pour récupérer les sondes pour enfants, nous n'avons qu'à faire des accessoires, des points, des enfants sur le navigateur. Voici les enfants. C'est vraiment génial. Pour récapituler. Ouvrez l'application js, puis tout ce que vous avez entre les balises d'ouverture et de fermeture est appelé sonde pour enfants. Et pour récupérer les sondes pour enfants, il suffit de sondes, points children, c'est aussi simple que cela. Revenez aux composants de l'application. Maintenant, la question est quel type de contenu est autorisé pour les sondes, les enfants à points, le contenu transmis à un composant, véritables invites indiquant que les enfants peuvent inclure le nombre booléen nul indéfini suivant, une chaîne, des éléments React, y compris un RA. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 15. 15 accessoires: Un autre point important dont nous devons tenir compte est que les sondes sont immuables. Et cela implique simplement que la valeur d'une sonde ne peut pas être modifiée. Laissez-moi le prouver rapidement. Ouvrez le composant de démonstration. Et ici, nous allons essayer de réattribuer une autre valeur à l'attribut name. Je vais donc le faire ici. Props, nom du point, equa, Angela sur le navigateur, l'application tombe en panne. Inspectons rapidement. La console. Impossible d'attribuer un nom de propriété en lecture seule. Les sondes sont donc en lecture seule, ce qui implique simplement que la valeur d'une sonde envoyée depuis un composant parent ne peut pas être modifiée dans le composant enfant. C'est pourquoi, lorsque nous essayons de réattribuer une autre valeur à l'attribut name, l' application Briggs. C'est tout pour le moment. Rendez-vous à la prochaine conférence. 16. 15 accessoires destructeurs: Dans cette doctrine, le destructeur Prompts a été introduit dans EXE. Il s' agit d'un futur JavaScript qui vous permettra d'extraire plusieurs données d'un tableau ou d'un objet, puis de les affecter à leurs propres variables. L'un des avantages de la structuration réside dans le fait qu'elle améliore la lisibilité du code. Donc, dans le composant fonctionnel, il existe deux manières de déstructurer les sondes, mais nous allons choisir la meilleure option, qui consiste à déstructurer les sondes directement à l'intérieur du périmètre d'une fonction. Essayons-le. Hein ? Nous sommes dans le paramètre de cette fonction, nous devons l'effacer. Et puis techniquement, support. Revenons donc à l'application. Nous avons ici le nom de l' attribut et le pays de l'attribut, n'est-ce pas ? Revenez donc, nous devons cibler précisément cet attribut : nom de pays plus calme, virgule. Les enfants n'ont pas effectué cette structuration. Nous devons accéder directement à tous les attributs. Nous n'avons plus besoin de sondes. Je vais donc mettre en évidence toutes les occurrences de props dot. Ensuite, maintenez la touche de commande appuyez sur la lettre D de votre clavier. D comme chien, comme ça, puis essuyez-le. Appuyez sur la touche Escape pour désactiver l'édition multiculturelle. Jetons un coup d'œil au navigateur. Pouvez-vous voir que tout fonctionne comme prévu ? J'adore ça. Donc, pour récapituler, si vous souhaitez déstructurer des sondes, cela doit être fait directement dans le paramètre d'une fonction. Et pour ce faire, vous devez d'abord prendre un crochet bouclé. Et à droite, entre crochets, vous pouvez ensuite cibler précisément le nom de l'attribut. Donc, voici ce que vous devez savoir. Donc, si vous faites une erreur, par exemple , faisons quelque chose de méchant ici. Pellons le pays comme ça. Lorsque vous faites cela, enregistrons dans le navigateur. Vous allez obtenir un résultat étrange. Regardez, le nom s' affiche à l'écran, mais les pays ont disparu. Ainsi, lors de l'exécution de cette structure dans, il est nécessaire de cibler précisément le nom de l'attribut. Donc je vais juste annuler, sauver Bone. Tout fonctionne comme prévu. J'adore ça. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 17. 16 Fonctions en tant que accessoires: Plus tôt dans la conférence précédente, nous avons appris à transmettre des accessoires d' un composant parent à un composant enfant. Maintenant, la question est s'il est possible de transmettre des accessoires d' composant enfant à un composant parent. Et la réponse est non. Vous ne pouvez pas transmettre directement des sondes d'un composant enfant à un composant parent. Mais vous pouvez toutefois transmettre une référence à une fonction sous forme de sonde au composant enfant. Un peu strié, non ? Passons rapidement à l'examen pratique pour que vous puissiez le comprendre suffisamment bien. Ouvrez l'Explorateur. Hein ? Nous sommes dans les composants. Nous allons créer un nouveau composant. Le point g des parents se trouve à nouveau juste à l'intérieur du composant. Nous devons également créer un autre composant, child dot js. C'est beau, éteignez l'Explorer. Ensuite, je dois également fermer la démo et les plaisanteries de l'application. Il en va de même pour le composant parent, je vais utiliser les raccourcis RFC pour générer le composant fonctionnel React js. Encore une fois, si le raccourci ne fonctionne pas de votre côté, c'est parce que vous n'avez pas installé l'extrait de code. Pour installer l'extrait de code, rendez-vous sur les extensions. Cliquez pour ouvrir. Donc, ici, nous allons passer à l'ESM. React slash, Redox Slash GraphQL, React Dash, extraits natifs. Je suis là. Est-ce que c'est un clic pour ouvrir ? Et de mon côté, je l'ai déjà installé. Et c'est pourquoi vous voyez ici le vote désinstallé. Donc, à la fin, il vous suffit de cliquer sur le bouton Installer pour l'installer. Fermez-le et fermez également les extensions. Maintenant, le raccourci va fonctionner pour vous. C'est bien, continuons. Donc, juste dans le div, nous allons avoir une balise hit one. Ici, je vais le faire , c'est le composant parent. Passons à l'enfant. G est là, n'est-ce pas aussi ? Nous devons générer le composant fonctionnel React js, le RFC et le os. Magnifique. Cela fait, définissons une fonction directement dans les composants parents, puis transmettons cette fonction sous forme sondes au composant enfant, le composant parent. Et faisons-le ici. Hein ? Je vais donc faire la fonction d'accueil des parents. Bien, dans le cadre de cette fonction, nous allons avoir un dialogue. Juste ici. Nous voulons afficher Welcome Parent. Le nid et la ligne doivent donc transmettre cette fonction sous forme de sondes au composant enfant. Laisse-moi te montrer rapidement. Donc, en haut, nous devons importer des composants enfants à partir d'une barre oblique à points. Nous allons donc rapidement effectuer le rendu des composants enfants. Plus près de l'enfant grâce à l'étiquette à fermeture automatique. Magnifique. Je n'ai pas fait ça. Nous pouvons maintenant passer la fonction sous forme sondes au composant enfant. Pour ce faire, nous devons spécifier l'attribut, puis lui attribuer une valeur. Mais cette fois, la valeur sera cette fonction, surlignez puis copiez, venez ici, collez. Voici donc les attributs et voici la valeur. Et tout cela s' appelle des sondes. Compris, magnifique. Ainsi, lorsque vous faites cela, nous avons réussi à transmettre cette fonction sous forme sondes au composant enfant. Une fois cela fait, nous devons afficher le composant parent directement dans la commande P de l'application pour faire apparaître la zone de configuration en haut. Alors je vais chercher ici, n'est-ce pas ? Nous n'avons donc qu'à faire un commentaire sur tous les points forts de ces poêles. Maintenez la touche de commande appuyez sur la barre oblique. Donc, en haut, nous devons importer les composants parents depuis le composant point, la barre oblique et le parent. Juste en dessous. Nous devons rapprocher les parents grâce à l'étiquette à fermeture automatique. Enregistrez, revenez aux composants parents. Nous avons donc réussi à introduire des accessoires dans les composants pour enfants. Western Line doit le recevoir directement dans la composante enfant. Enfant. Et pour ce faire, il suffit de prendre ses accessoires comme argument. Et puis, lorsque vous enregistrez des sondes sur le navigateur ou que vous commandez I pour ouvrir la console. Et nous devons également ouvrir l'objet accessoire. Et voici la grille d' attributs avec parents de la grille de fonctions au fur et à mesure que sa valeur remonte. Le but de cette conférence est donc d'appeler la fonction que nous avons définie dans le composant parent ici même, dans le composant enfant. Donc, en cas d'abandon du composant enfant, nous voulons pouvoir appeler cette fonction, revenir pour le contacter. Disons qu'il y a un bouton ici. Et juste ici. Nous devons spécifier le onclick. En un clic sur le bateau. Nous voulons pouvoir appeler le parent de la grille de fonctions. Et bien sûr, vous savez que le parent de la grille de fonctions est déjà stocké dans l'objet props. Maintenant, je vais créer des accessoires, des points, des grilles. Donc, lorsque vous faites cela, en toute sécurité sur le navigateur, il s' agit du composant parent. Voici les composants pour enfants. Donc, en cliquant sur ce bouton, nous voulons appeler la fonction définie dans la clique du composant parent. Tu peux voir ça ? Vous travaillez sur les parents ? Pour récapituler, nous définissons la fonction ici dans les composants parents. Ensuite, nous transmettons la fonction sous forme sondes aux composants enfants. Ainsi, chaque fois que nous faisons une grille à points d' accessoires, elle récupère la valeur transmise aux attributs, qui, dans ce cas, sont les parents de la grille de fonctions. Enfin, nous déclenchons le bas en spécifiant le bouton onclick. En cliquant sur ce bouton. Cette fonction va être activée ici. Alors, quel est exactement l' avantage de les faire ? Très bien, l'avantage de le faire est que cela contribue à améliorer les performances. Ainsi, lors de la création d'une application de récompense, il est probable que vous vous retrouviez dans une situation où vous souhaitez utiliser une fonction dans différents composants. Très bien, alors laisse-moi te montrer rapidement. Ouvrez l'Explorateur , puis accédez aux droits du composant. Cliquez avec le bouton droit sur nouveau fichier. Et je vais appeler ces utilisateurs dot js. Fermez l'explorateur, générez le composant fonctionnel React js. Hein ? Dans ce composant, nous souhaitons également utiliser cette même fonction. D'accord ? Donc, ce que je vais faire maintenant, c'est d'abord importer les composants utilisateur à partir de point slash user. Nous devons le rendre ici. Plus près avec l'étiquette à fermeture automatique. Je vais spécifier les grilles d'attributs puis leur attribuer une valeur, qui, dans ce cas, est le parent de la grille de fonctions à réutiliser en tant que composant. Ensuite, nous devons recevoir les sondes. Donc, pour l'instant, je dois juste retourner voir l'enfant et copier ce bas de page. Je suis là. Coller. Vérifions-le sur le navigateur. Voici la navigation depuis le composant enfant, et voici la navigation depuis le composant utilisateur. Ainsi, lorsque nous cliquons sur le bouton et sur le composant utilisateur, vous pouvez voir que nous appelons la même fonction que celle définie dans le composant parent. De plus, lorsque nous cliquons sur le composant graphique, cela fonctionne exactement de la même manière. Donc, si vous créez une application et que vous souhaitez utiliser la même fonction dans différents composants. La meilleure option est de transmettre cette fonction sous forme sondes au composant qui a besoin de graines. C'est aussi simple que cela. Revenons à l'enfant. Un autre point important que je souhaite que vous preniez note est de savoir comment transmettre paramètre lors de l'appel d'une fonction définie dans le composant parent à partir du composant enfant. C'est donc extrêmement important. En fait, il s'agit principalement d'une question d'entretien. Alors maintenant, faisons attention à la façon de procéder. moyen le plus simple de transmettre un paramètre du composant enfant au composant parent consiste donc au composant parent consiste implémenter la syntaxe de la fonction flèche. Nous allons faire entrer une fonction de flèche ici. Spécifiez-le comme ceci. Ainsi, avec cela, nous pourrons transmettre n'importe quel nombre de paramètres à la fonction de salutation. Laisse-moi te montrer rapidement. Donc, ici, il n'y aurait pas de dysfonctionnement. Nous allons suivre la chaîne ici même. Je vais le faire, je suis enfant. Nous voulons les transmettre en tant que paramètre à la fonction parent de la grille. Ici. Nous devons l'intégrer correctement, dans le cadre de la fonction parentale décrétée. Donc, ici, je vais faire un enfant. Nous allons maintenant utiliser l'interpolation de chaînes. Changez-le pour embarquer, tac, cocher. Nous allons prendre des crochets. Donc je vais faire un enfant ici. Je vais juste faire un commentaire à ce sujet. Après avoir fait tout cela, examinons le résultat sur le navigateur. Cliquez sur le bouton. Vous allez voir, soyez le bienvenu, parent, je suis un enfant. Et je veux que vous vous souveniez que cela a été transmis en tant que paramètre du composant enfant du composant enfant à la fonction parent de la grille. Et la fonction parent de la grille est définie dans les composants parents. C'est donc exactement comment passer un paramètre lors de l'appel d'une fonction définie dans les composants parents à partir du composant enfant. Et s'il vous plaît, je veux que vous en preniez note car cela apparaît principalement comme une question d'entretien. C'est tout pour le moment. Je vois que vous avez apprécié cette conférence. Restez concentré et prenez toujours soin de vous. 18. 17 État de réaction (useState): Dans cette conférence, nous allons comprendre comment fonctionne l'état dans React js. Bien, supposons que vous créez une application et vous souhaitiez conserver données d'un composant qui évoluent au fil du temps. Par exemple, en cliquant sur un bouton, vous souhaitez changer le titre de votre application en quelque chose d'autre. Oui, ce sera donc fait avec les accrocs de la dette américaine. Moins pratique car cela est rapide, créez rapidement un nouveau composant intitulé Component Command B. Cliquez avec le bouton droit sur le répertoire des composants ici sur Nouveau fichier. Type Tool components dot g is generate. Le composant fonctionnel. Ensuite, nous avons eu un début ferme, ouvrez l'application js, puis exécutons ce composant ici. Tout d'abord, nous devons l'importer, importer les composants du titre à partir du composant Slash Title. Nous devons également faire un commentaire à ce sujet. Cliquez ici, puis titrez de manière compétente, plus près avec la balise à fermeture automatique, passez au composant titre. Le but de cette conférence est donc de changer le titre de notre application lorsque vous cliquez sur le bouton. Donc, pour conserver des données de compétence qui évoluent au fil du temps, nous devons utiliser l'État américain qui les regarde. Donc, tout en haut, il suffit de l'importer. Appuyez sur une virgule ici, ouvrez et fermez les crochets. Et je vais utiliser des dates. L'utilisation de ce hook est une fonction spéciale qui prend l'état initial comme argument, puis renvoie un tableau de deux entrées. C'est une fonction, nous devons donc l'invoquer. Je vais le faire comme ça. Et l'état initial sera une chaîne vide. Nous avons également mentionné que nous utilisons ce hook pour renvoyer un tableau de deux entrées. Donc, ici, nous allons avoir const, ensembles de virgules du titre, serrés, assigner comme ceci. Cette variable est donc utilisée ici pour maintenir l'état initial. Et puis ce gars ici est une fonction de configuration qui est utilisée pour mettre à jour l'état initial. Et dans ce cas, nous allons avoir l'état initial qui sera React JS. Parce que les débutants ne l'ont pas fait. Affichons l'état initial, à droite, dans la balise H1. Frappez-en un. Nous allons avoir un crochet et ensuite nous n'aurons plus qu'à afficher l'état initial, qui est le titre. Collez-le ici, enregistrez. Cette variable contiendra donc l'état initial lorsque vous enregistrerez et quitterez le navigateur. Nous y voilà. Tu vois ça ? Belle ? Le but de cette conférence est donc de changer le titre de cette application lorsqu' un bouton est cliqué. Ici, nous allons spécifier un bateau. Ici. Je vais changer de titre. Magnifique. C'est ici. Donc, en ce moment, lorsque vous cliquez sur le bouton, rien ne se passe. Implémentons rapidement le onclick. En un clic, égal à. Nous allons utiliser une fonction de flèche ici. Ensuite, nous devons invoquer l'outil de type set de fonctions de configuration, qui est ce type ici. Et si vous écrivez en acceptant de définir notre fonction, nous passerons dans le nouvel état. Donc, ici, je vais juste le faire Sauvegardons-le et vérifions-le sur le navigateur. Essayons-le en cliquant sur le bouton « Changer le titre » du bateau. Vous voyez qu'en un clic sur le bateau, le titre a changé ? Rechargeons. Pouvez-vous voir les appels React js pour les débutants. Et lorsque je clique en bas, nous voyons apparaître les appels React Hooks ultimes. C'est vraiment magnifique. Et en fait, ce n'est qu'un aperçu des crochets américains, ne vous inquiétez pas. Dans le futur ? Nous allons discuter des crochets plus en détail. Donc, pour récapituler, chaque fois que vous souhaitez gérer des données qui changent au fil du temps, vous devez absolument utiliser les hooks Git. L'utilisation de ce hook est une fonction qui prend l'état initial comme argument, puis renvoie un tableau de deux entrées. Donc, c'est vrai, dans ce tableau, la première variable est utilisée pour stocker l'état initial. Ensuite, le deuxième élément de ce tableau est une fonction de configuration utilisée pour mettre à jour l'état initial. Ainsi, lorsque vous cliquez sur le bouton, cette fonction est invoquée. Ensuite, nous aurons un nouvel état qui sera utilisé pour mettre à jour l'état initial. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 19. 18 Gestion des événements: Lorsque vous travaillez sur un projet de récompense, l'application aura certainement des interactions avec les utilisateurs. Ainsi, lorsque l'utilisateur interagit avec l'application, des événements sont déclenchés. Par exemple, un clic de souris, , une pression sur une touche, etc. La gestion des événements avec des éléments React est donc très similaire à la gestion des événements avec ses éléments DOM HTML. Mais la différence est que les événements React sont nommés en utilisant le cas du karma. Donc, par exemple nous allons avoir onclick qui est celui de on-click. De plus, des gestionnaires d'événements React sont écrits à l'intérieur des accolades. Très bien, faisons en sorte que cela ouvre rapidement droits de l'explorateur dans le répertoire de compétences. Nous allons créer un nouveau composant. Et ils seront appelés gestionnaire d'événements de clic point g est RFC pour générer le composant fonctionnel. Ici, nous allons définir une fonction. Fonction. Cliquez sur Handler. Hein ? Dans la fonction, nous allons accéder au journal Euclid de la console, les droits de vote sur les actions au sein de la division. Nous allons voter sur l' action, n'est-ce pas ? L'intention ici est donc de vous apprendre comment fonctionne l'événement onclick. Donc, directement dans le bateau, nous allons spécifier le bouton onclick, puis le configurer pour équilibrer ces éléments lorsque vous cliquez sur ce bouton. Nous voulons déclencher cette fonction. Alors ici, je vais juste faire le gestionnaire de clics. Une fois cela fait, nous devons afficher ce composant directement dans l'application. Railleries. Points forts, ajoutez-y un commentaire. Ensuite, nous allons voir le gestionnaire d' événements à clic de plus près avec la balise à fermeture automatique. Enregistrez le résultat du navigateur et moi pour ouvrir la console. Et maintenant, lorsque nous cliquons sur ce bouton, le message est connecté à la console. Essayons-le. Vous voyez que vous avez cliqué sur le bouton d'action ? Lorsque vous cliquez à nouveau, le message est enregistré deux fois. VAP signifie donc que Lee gère les événements pendant les années React. Très bien, revenons au code et soulignons l' erreur courante dont nous avons commencé à parler en matière de gestion des événements. Il se peut donc que vous aimiez faire quelque chose comme ça. En prenant les parenthèses. Ainsi, lorsque vous incluez les parenthèses, cela devient un appel de fonction. Voyons le comportement lorsque vous incluez les parenthèses. Je dois d'abord recharger. Pouvez-vous voir que lorsque vous observez la console, vous vous rendrez compte que le message est enregistré dans la console. Vous n'avez donc pas besoin de cliquer sur le bouton pour que ce message soit enregistré. Vous voyez, même si vous cliquez sur le bouton, rien ne se passe. Pourquoi ? Lorsque vous spécifiez les parenthèses, cela devient un appel de fonction. Ainsi, lorsque vous enregistrez l'application et revenez à la console, la fonction sera immédiatement appelée. Frappe. D'accord, et maintenant essayons de supprimer les parenthèses en toute sécurité dans le navigateur. Maintenant, nous devons rafraîchir. Pouvez-vous voir que rien n'est enregistré sur la console. Et maintenant, vous devez cliquer sur le bouton Action pour enregistrer le message sur la console. Point à prendre en compte lors de la gestion des événements. Il n'est pas nécessaire de spécifier les parenthèses. Lorsque vous faites cela, il devient un gestionnaire d'événements appelé et non un appel de fonction. Très bien, ce n'est donc qu'une fonction. Essuyons-le. Enregistrez dans le navigateur. Tout fonctionne comme prévu. Pour récapituler. gestionnaire d'événements de React js est écrit en touches de karma, ce qui implique que vous mettiez en majuscule la première lettre de chaque mot à l'exception du premier mot. Après cela, vous devez le placer sur un support bouclé. Et bien, entre crochets, il ne vous reste plus qu'à passer. La fonction est aussi simple que cela. 20. 19 Rendu conditionnel: Lorsque vous créez une application réelle, vous vous retrouverez certainement dans une situation où vous devrez afficher celle Jess en fonction des conditions de réglage. Nous avons donc quatre approches différentes pour résoudre ce problème. Incluez les instructions if else, la variable element, l'opérateur conditionnel de tannerie et les courts secrets ou le burrito. Mais dans cette conférence, nous allons choisir l'approche la plus fiable et la plus largement utilisée, qui inclut la tannerie, l'opérateur conditionnel et le court secret ou le burrito. Soyons pratiques : cela ouvre rapidement l' Explorateur, n'est-ce pas ? Au sein du composant. Nous allons créer un nouveau composant appelé user login dot js. Générez le composant fonctionnel. Donc, juste à l'intérieur de la division, nous allons avoir un parc à succès. Et je vais vous souhaiter la bienvenue au projet de classe. Et nous allons également avoir un autre tag H2. Et ce sera le cas, vous ne pourrez pas accéder à ce projet. L'idée est donc la suivante si la condition est vraie, nous allons afficher la haie avec une étiquette et une autre. Si la condition est fausse, nous allons afficher la balise H2. Exécutons rapidement ce composant dans l'application, GAS met en évidence et ajoutons un commentaire dessus. Fais une bêtise. Juste ici. Nous allons importer la connexion utilisateur à partir de la connexion utilisateur du composant slash. Juste ici. Nous n'avons qu'à courir jusqu'ici. Plus près avec l' étiquette à fermeture automatique et revenons ici. Déclarons rapidement une variable ici. Ensuite, je vais me connecter, le mettre sur true. Passons donc à la mise en œuvre. Donc, d'abord, nous devons l' emballer dans un crochet frisé Command X pour couper, ouvrir les bretelles bouclées, venir ici et le coller. Donc, pour l'instant, je vais me connecter. C'est vrai Nous allons afficher la balise H1 et une autre. Nous allons afficher la balise H2 sur le navigateur. Bienvenue dans le projet d'ED Baba. Donc, si nous le changeons en faux, c' sûr, vérifiez-le. Vous ne pouvez pas accéder à ce projet. Donc, tout fonctionne parfaitement comme prévu. Ça va ? Cela est donc utilisé pour indiquer quand la condition est vraie. Et cela est utilisé pour indiquer quand la condition est fausse. Laisse-moi zoomer un peu. Pouvez-vous voir que cela est utilisé pour indiquer quand la condition est vraie. Ceci est utilisé pour indiquer quand la condition est fausse, c'est aussi simple que cela. La ligne suivante est donc la photo Secret Approach. L'approche Shot Secret est donc utilisée lorsque vous souhaitez afficher quelque chose ou rien. Moins pratique, est-ce rapide ? Nous devons donc d'abord faire un commentaire sur ce point fort. Maintenez la touche de commande, la touche de tabulation la barre oblique enfoncée pour utiliser l'approche secrète du tir. Supposons donc que vous souhaitiez afficher bonjour, je suis connecté lorsque la condition est vraie. Et si la condition est fausse, nous ne voulons pas afficher d'éthane. D'accord ? Je vais donc prendre en compte les crochets. Donc, ici, je vais être connecté et pour cent, euh, pour cent, puis nous aurons un headtag. Et juste à l'intérieur de cette étiquette, je vais vous dire bonjour. Je suis connecté au navigateur. Il ne se passe rien. Pourquoi ? C'est simplement parce que la condition est fausse. Donc, lorsque vous le modifiez en vrai, en toute sécurité sur le navigateur, bonjour, je suis connecté. L'approche secrète du cliché est donc utilisée pour le rendre ou quelque chose ou rien. Permettez-moi donc de vous expliquer rapidement comment cela fonctionne. Ainsi, l'approche secrète du tir évaluera d'abord le côté gauche pour vérifier si la condition est vraie. Et sur la base du vrai C, le côté droit sera évalué. Donc, s'il est connecté, c'est faux, du côté droit, nous ne serons jamais évalués. Réagissez, ignorera le côté droit. Tout simplement parce que nous ne voulons rien afficher à l'écran si la condition est fausse. Il ne serait donc pas nécessaire d'évaluer le côté droit. 21. 21 méthode de carte: Lorsque vous créez une application React, l'un des problèmes que vous devrez toujours résoudre est savoir comment afficher une liste d'éléments à l'écran. Par exemple, il peut vous être demandé d'afficher la liste des produits que nos employés utilisent, etc. React G est le meilleur moyen d' afficher une liste d' éléments à l'écran en utilisant la méthode cartographique. La méthode map vous permet d'itérer sur un tableau et de modifier son élément à l'aide d'une fonction de rappel. La fonction de rappel sera ensuite exécutée sur chacun des éléments de l'iris. Des techniques. La carte n'est pas l'avenir de React. Il s'agit plutôt d'une fonction JavaScript standard qui peut être appelée sur n'importe quel tableau. Soyons pratiques, est-ce rapide pour que tout le monde le comprenne suffisamment ? Procédez à la création d'un nouveau composant. C'est vrai, dans le répertoire du composant. Cliquez sur Nouveau fichier. ce que l'on appellera le moins d' employés Delta G est générique, le composant fonctionnel. Fermons l'Explorateur. Donc, ici, nous sommes en train de créer un éventail d'employés. Les employés sont égaux, ouvrent et ferment les crochets. Et juste à l'intérieur du tableau, nous allons avoir une virgule Daisy, une virgule Mike, Joe. Et enfin, nous allons avoir Angela. Remarquez que j'ai utilisé un mot au pluriel ici. C'est en effet une bonne pratique de toujours utiliser un mot au pluriel lorsque vous nommez votre tableau. Tout simplement parce qu'un tableau est une collection d'éléments ayant un type de données similaire. Nous avons donc ici plusieurs éléments directement dans le tableau. Continuons. Maintenant, le principal défi consiste à afficher la liste des employés sur le navigateur. Donc, normalement, nous pouvons également le faire en utilisant l'index du tableau. Bon, dans cette division, nous allons avoir une balise H2. Donc, à l'intérieur de la balise H2, nous allons spécifier des crochets, puis écrire entre ces crochets, nous n'avons pas eu à accéder aux éléments du tableau. Et bien sûr, pour accéder au premier élément du tableau, nous devons utiliser un indice de tableau égal à zéro. Donc, pour l'instant, je vais mettre zéro entre crochets pour les employés. Cela va donc récupérer le premier élément de ce tableau, surligner, le dupliquer trois fois. Ensuite, pour accéder aux deuxièmes éléments, nous devons utiliser l'outil d'index index index one. Enfin, pour l'index du quatrième élément trois commandes P. Passons à l'application Js. Et ici, nous devons rendre les congés aux employés. Tout d'abord, nous devons importer la liste des employés à partir de la barre oblique des congés des employés. Et en bas, nous devons simplement afficher un composant ici, puis fermer à l'aide de la balise de fermeture souple. Et sous navigateur ici. Nous avons maintenant la liste des employés affichée sur le navigateur. Très bien, cette approche peut sembler simple et fonctionner correctement, oui, mais elle présente un inconvénient majeur. Permettez-moi de vous montrer rapidement le code VS et surtout, lorsque vous observez l'écran, vous vous rendrez compte que cela implique une répétition de code. Imaginons donc que nous ayons des milliers d'employés, est-ce pas, au sein de cette collection. Cela signifie donc que nous devons le faire des milliers de fois. Nous allons obtenir quelque chose comme ça en ciblant le bon indice des milliers de fois. Cela rendra notre code extrêmement bruyant et celui-ci sera agréable du tout. En suivant les meilleures pratiques, nous devons donc utiliser la méthode cartographique pour effectuer un titrage sur le tableau. Très bien, alors annulons rapidement. Magnifique. Il ne nous reste plus qu'à effacer la balise H2. Repartons de zéro. La méthode cartographique est un code JavaScript qui doit être évalué, n'est-ce pas ? Nous devons donc l' envelopper dans un crochet bouclé. Ensuite, la ligne Nestor doit appeler la méthode cartographique sur le tableau. Habituellement, la syntaxe est array dot. Carte. Il s'agit donc exactement des mêmes balises, mais dans ce cas, le nom de la zone est « employés ». Donc je vais juste faire une carte à points des employés. La méthode map prend comme argument une fonction, et dans ce cas une fonction de flèche. De plus, la fonction flèche prend en compte un argument que je vais appeler employé. Cet employé ici représente chaque élément du tableau. Encore une fois, vous pouvez décider de changer le nom de cet argument, mais je vous suggère vivement d'utiliser un nom descriptif pertinent pour le tableau sur lequel vous itérez. C'est aussi simple que cela. Très bien, c'est donc à l'intérieur du corps fonctionnel la transformation aurait lieu. Donc, pour chaque employé, nous allons renvoyer une couverture à baliser avec l'employé sous forme de retour HTML interne, nous allons avoir une balise H2. Et bien, dans la balise H2, nous allons renvoyer l' employé sous forme de code HTML interne Cet argument qui représente chaque élément du tableau est aussi simple que cela. Enregistrez dans le navigateur. Ici, le beau, ce problème que nous venons de résoudre est assez simple. Choisissons un scénario plus complexe. Revenons au code VS. Dans une organisation de récompenses. détails des employés incluront le nom, l' identifiant, le numéro de téléphone, etc. Très bien, faisons rapidement en sorte que l'objet d'un employé inclue tous ces détails correctement, entre crochets. Je vais juste effacer les éléments, puis appuyer sur la touche Entrée comme ceci. Nous allons avoir un objet directement dans le tableau. Donc, directement dans cet objet, nous allons avoir les propriétés et sa valeur. Et dans ce cas, les coordonnées des employés. Nous allons séparer le nom par une virgule. Nous allons avoir un sexe, homme séparé par une virgule. Nous allons avoir un pays, le Royaume-Uni. Enfin, nous allons vieillir. Vous pouvez donc choisir de mettre en place autant de détails que vous le souhaitez. Mais pour moi, je vais juste m'arrêter ici, juste à côté de l'objet. Nous allons le séparer par une virgule. Maintenant, nous allons le surligner puis le dupliquer autant de fois que vous le souhaitez. Mais assurez-vous de modifier les détails, c' est-à-dire les valeurs. Donc, ici, je vais les modifier. Je vois aujourd'hui, désolée. Ce sera une femme. Ici. Nous allons en faire 19. Il vous suffit donc de modifier les détails pour terminer. Et j'en ai fini avec le mien. Tu peux voir du beau ? Cette approche ne fonctionnera donc plus pour cet objet simplement parce que nous n'avons plus affaire à des chaînes. Donc, ici, je vais effacer la balise H2, puis ouvrir et fermer les parenthèses, n'est-ce pas ? Parenthèses. Nous allons avoir un tag H2 et écrire un tag H2. Nous devons afficher l' employé sous forme de code HTML interne. Et dans ce cas, l'employé ici représente chaque objet de la liste. Et pour accéder aux propriétés, nous devons utiliser l'opérateur point. Et ici, je vais faire le point du nom de l'employé. Ainsi, lorsque nous ciblons la propriété, la valeur sera récupérée simplement en la mettant en évidence, en dupliquant quatre fois. Et nous avons une erreur ici. Il dit que les gestes et les expressions doivent avoir un élément parent. Viens ici. Nous allons avoir une division parent. Donc, juste à l'intérieur de ce div surlignons, puis déplacez le code dedans. Ici, nous allons avoir le point, le sexe et le pays de l'employé. Et enfin, avoir un emploi à un âge avancé. Sûr sur le navigateur. Pouvez-vous voir que tout est affiché sur le navigateur et fonctionne parfaitement comme prévu. Nous avons maintenant la liste des employés à l'écran, mais il existe une autre approche pour le faire en une seule ligne. Et cela grâce à l'utilisation de l'interpolation de chaînes, c' est-à-dire des littéraux d' objets, directement au code VS. Et faisons-le rapidement. Débarrassons-nous de tout ici. Effacez-le maintenant pour que nous devions nettoyer un peu le code. Parfait. Nous allons donc avoir un autre tag H2, H2. Nous allons avoir des bretelles frisées, non ? Entre les bretelles frisées. Nous allons utiliser l'interpolation de chaînes. Pour le faire. Il suffit de spécifier le thé à l'écorce. Et le batik se trouve dans le coin supérieur gauche du clavier, juste en dessous de la touche d'échappement. Ici, je vais faire un nom. Nous allons avoir le signe 1$, ouvert et fermé entre crochets. Et je vais faire le point du nom de l'employé. Viens ici. Et ici, nous allons avoir l' ordre du jour, les points des employés, le sexe. Nous allons avoir un pays, un pays point pour les employés. Enfin, nous allons indiquer l' âge de chaque employé, sauf elle. Très bien, alors formatons rapidement ce code avec prettier. Formatez les documents avec Prettier. Je pense que le code est joli en ce moment. Vous pouvez donc y jeter un œil. Tu vois, laisse-moi faire un petit zoom arrière. Et le voici. Jette un coup d'œil. Tu vois bien ? Sortons-le sur le navigateur. Vous voyez que tout fonctionne parfaitement comme prévu ? J'adore ça. Très bien, donc après le mappage, une autre chose que font la plupart des développeurs est de déstructurer le code. Permettez-moi de vous apprendre rapidement comment procéder. Alors détruisez le code. Nous allons venir ici et ensuite nous pourrons avoir une fonction JavaScript normale ou même un composant. Alors maintenant, je vais faire const, ouvrir et fermer les crochets. Nous voulons structurer le nom, la virgule, le sexe, le karma, le pays et l'âge, puis les attribuer à l'employé lui-même. Le plus simple est qu'une fois cela fait, nous n'avons plus besoin d'utiliser l'opérateur point pour accéder aux propriétés. Nous allons maintenant pouvoir y accéder directement. Entrez ici, sélectionnez le point de l'employé, puis maintenez la touche commande de votre clavier enfoncée. Appuyez sur la lettre D pour sélectionner toutes les occurrences du chien de l'employé. C'est aussi simple que cela. Ensuite, essuyez-le. Enregistrez, appuyez sur la touche Escape pour désactiver l'édition multiculturelle. Et sur le navigateur. Ils les ont magnifiques. Le code semble maintenant plus concis et plus lisible. Je l'adore comme ça. Hein ? Donc, suivre les meilleures pratiques matière d'imbrication des lignes consiste à refactoriser le code. En refactorisant le code, je veux simplement dire que nous devons améliorer la structure de notre code pour améliorer la lisibilité et la maintenabilité. ce faire, il faut donc séparer la logique du composant de présentation. Faisons-le rapidement. Nous ne voulons donc pas que toute la logique soit écrite ici. Nous devons donc cacher la logique dans des composants séparés. Ouvrez l'Explorateur à droite, dans le répertoire compétent, créez un nouveau fichier, et celui-ci sera intercepté. Le point J de l'employé est générique. Les composants fonctionnels. Revenez rapidement à la position M. Ensuite, nous devons surligner à partir des lignes 3032, des lignes 38, la commande X pour couper. Retournez à l'employé, sélectionnez une valeur entre moins quatre et six, effacez-la, puis cliquez sur la commande V pour coller. fois cela fait, nous devons cartographier cette composante , à savoir l' entreprise de l'employé, et revenir à une erreur de liste. Donc, tout en haut, nous devons importer un employé à partir d'une barre oblique. Juste en dessous. Nous devons le rendre ici. Plus près se trouvaient les étiquettes à fermeture automatique. La prochaine étape consiste donc à transmettre les DT en tant que sondes. C'est vrai, n'est-ce pas l'employé ? Nous allons avoir le même nom. Nom de point de l'employé. Nous allons avoir le sexe, le sexe des employés. Et nous avons un pays égal, un employé et un pays. Enfin, nous avons un employé égal, point h. est-ce pas ? Il suffit donc de formater le code. Magnifique. Nous avons réussi à transmettre toutes ces informations sous forme d' enquêtes à la composante des employés. La prochaine étape consiste donc à recevoir les sondes si rapidement, dirigez-vous vers l'employé. Tout d'abord, nous devons le recevoir en passant des sondes en paramètre, à droite, dans la fonction. Ensuite, nous devons l'attribuer à des sondes. Sûr. Retirez-le sur le navigateur. Hein ? Nous avons un écran blanc. OK, revenons au code VS. Tout semble bien ici. Voyons ce qui peut faire le moins de mal à l' employé, n'est-ce pas ? Nous devons donc cocher le crochet bouclé, l' effacer, venir ici , l' effacer et retirer le point-virgule. Enregistrez dans le navigateur. Ils le sont, ceux-là. Tout semble fonctionner parfaitement bien. Mais lorsque nous inspectons la console, jetez-y un coup d'œil. Nous allons voir cette erreur ennuyeuse ici qui dit que c'est un enfant dans une liste qui devrait avoir un accessoire clé unique. Faisons-le lors de la prochaine conférence. À bientôt. 22. 22 accessoires uniques (cartographie): Très bien, donc lorsque vous ouvrez la console, vous allez voir cette erreur ennuyeuse ici. Et il est dit que chaque enfant d' une liste doit avoir un accessoire clé unique. Pour résoudre ce problème, il suffit de revenir au code et de spécifier la clé. Si vite, l'héroïne passe au code VS. La clé doit être unique. Dans la limite du possible, nous allons rechercher une propriété qui peut être utilisée pour identifier de manière unique chaque employé. Ainsi, lorsque vous observerez la liste, vous vous rendrez compte que le nom est tout à fait unique. Les employés, juste dans cette liste, ont des noms différents. Nous pouvons ensuite utiliser le nom comme sonde clé unique. Viens ici. Je vais utiliser la clé Equa, le nom de point de l'employé. Lorsque vous enregistrez et quittez le navigateur, voyez-vous que l'erreur a disparu ? Magnifique. Tout semble fonctionner parfaitement, mais il n'est pas conseillé d' utiliser le nom comme accessoire clé unique. Pourquoi ? C'est tout simplement parce que dans un organisme de récompense, il y a de fortes chances que vous ayez deux employés différents. Ce B porte le même nom. Il n'est donc pas approprié d'utiliser le nom comme une sonde à clé unique. Laisse-moi te montrer rapidement. Ici, nous avons un bar à deux barres. Changeons donc ce type par baba, car dans une organisation de récompenses, il y a de fortes chances que deux employés portent le même nom. Donc, quand vous avez quelque chose comme ça, il y aura un conflit. Donc utiliser le nom comme sonde clé ne fonctionnera plus. Tu peux voir qu'il dit et compte à rebours pour les enfants qui ont la même clé. C'est Abeba. Les clés doivent être uniques afin que les composants conservent leur identité au-delà de D. La meilleure façon de résoudre ce problème est donc de spécifier un identifiant d'employé simplement car dans une organisation réelle, les employés doivent avoir un identifiant unique. Chaque employé a donc un identifiant différent. Et c'est le meilleur moyen de spécifier les sondes clés. Viens ici. Directement sur la liste. Il suffit de spécifier l'identifiant, d'en faire un, de le surligner, de le copier, venir ici, de coller Mickey pour en faire trois. Et enfin, fais-le pour. Donc, si vous avez plus d' employés dans la liste, vous pouvez également spécifier leurs identifiants pour qu' ils correspondent au nombre d'employés. Et ici, nous allons le changer en ID dans le navigateur. Actualisons rapidement la console. Pouvez-vous voir que tout fonctionne parfaitement comme prévu ? Un autre point important que je souhaite que vous preniez note est que lorsque vous spécifiez les sondes clés uniques, cela doit être fait au plus haut niveau. Revenez au code VS et laissez-moi vous le montrer rapidement. Si je devais tout résumer dans la division parent. Points forts. Maintenez la touche Alt de votre clavier enfoncée, puis appuyez sur la flèche vers le haut pour la déplacer. Et puis, lorsque nous enregistrons et revenons au navigateur, la clé ne fonctionnera plus. Il se recharge au moins devrait avoir un accessoire clé unique. C'est tout simplement parce que les sondes clés doivent être effectuées au plus haut niveau. Je vais donc simplement le surligner, puis le supprimer. Viens ici, juste au sein de la division. Collez-le. Très bien, il suffit de formater rapidement le code. Magnifique sur le navigateur. Actualisons la console. Pouvez-vous voir que tout fonctionne parfaitement bien. C'est tout pour le moment. Je vois que vous avez apprécié cette conférence. Restez concentré. Irréaliste. 23. 23 css réguliers: Dans cette conférence, nous allons apprendre à styliser les composants React. Il existe plusieurs options pour styliser le composant React. Et ces options incluent des feuilles de style CSS classiques, CSS en ligne, un module CSS, du CSS dans le composant de démarrage du SIG et bien plus encore. Dans cette conférence, nous allons nous en tenir aux trois premiers, à notre approche. Et maintenant, nous allons commencer par la feuille de style CSS classique. Très rapidement, dans le répertoire de compétences, nous allons créer un nouveau composant. Feuilles de style irrégulières. point G, c'est que je m' assure toujours d'utiliser un nom descriptif pour mes poêles afin de pouvoir m'y référer facilement à l'avenir. Fermez l'Explorateur, puis générez rapidement les composants fonctionnels. Donc, dans la division, nous allons avoir une étiquette principale et nous allons toucher une étiquette. Je vais apprendre à styliser le composant React. Très bien, alors stylisons rapidement le bandeau. Ouvrez l'Explorateur et créez rapidement un fichier CSS directement dans le répertoire du composant. Ce fichier CSS serait intercepté. Mes styles sont parsemés de CSS. Après avoir créé le fichier CSS, nous devons donc styliser la balise Hadrian. Viens ici. D'abord. Pour le faire. Nous devons spécifier le nom de la classe. Je vais l'appeler primaire. Accédez au fichier CSS. Ici, nous devons styliser le principal, qui est le nom du cluster qui sera utilisé pour référencer la balise H1. Alors, à droite, entre accolades, spécifiez régulièrement la taille de police. Faisons 50 pixels, la couleur. Faisons en sorte qu'il soit bleu. Enfin, il suffit de spécifier la famille de polices. Et je vais augmenter le taux de change, non ? La ligne suivante consiste donc à lier le fichier CSS à l'entreprise. Et viens ici tout en haut. Nous allons importer des barres obliques, mes styles point css, les plus simples qui ouvrent le composant de l'application. Nous devons donc faire un commentaire à ce sujet. Rapidement. Importons. Importons rapidement des feuilles de style normales à partir de la feuille de style standard Component Slash. Juste ici. Il suffit de rendre les feuilles de style classiques plus près avec la balise à fermeture automatique. Enregistrez sur le navigateur, c'est ici, vous pouvez le voir ? Belle ? Très bien, une autre chose que vous pouvez également faire est d' appliquer conditionnellement une classe en fonction des enquêtes ou des états de l'entreprise. Laisse-moi te montrer rapidement. Donc, ici, nous allons avoir un accessoire principal égal. Mettons-le sur vrai. Cela fait, nous devons recevoir les sondes, directement dans le composant normal de la feuille de style. Pour ce faire, nous prenons les sondes comme des droits de paramètres dans le cadre de la déformation. Maintenant, voici ce que je vais faire. Nous allons avoir une variable appelée ClassName. Ensuite, si props dot primary est égal à true, nous allons définir le nom de la classe sur primary and errors. Nous allons définir le nom de la classe sur secondaire, le point le plus simple. Donc, en gros, le résultat de l'opération sur le côté droit sera stocké sur cette variable. Et maintenant, cette variable sera utilisée comme nom de classe. Je viendrai ici. Surlignez, essuyez-le, ouvrez et fermez les crochets bouclés. Ensuite, nous devons transmettre le nom de la classe, qui est ce gars ici. Donc, si props dot primary est égal à true, le nom de la classe sera principal, puis nous styliserons le principal. Et sinon, si c'est faux, le nom de classe sera secondaire. Tous ces éléments seront donc stockés dans une variable constante appelée nom de classe. Ensuite, nous le transmettons dynamiquement ici. Donc, ici, ce sera le principal lorsque la condition sera vraie. Et il conservera le secondaire lorsque la condition est fausse. Retournez au fichier CSS. Nous devons styliser le secondaire. Je vais juste tout copier d'ici, d'ici. Il suffit de changer la couleur pour. Tomate. Ici. Supprimons la famille de polices. En sécurité sur le navigateur et sur les os. Pouvez-vous voir que la condition est vraie ? Par conséquent, nous allons styliser le faisceau primaire. Donc, lorsque vous reviendrez ici et que vous modifierez la condition pour forcer la sécurité sur le navigateur, nous aurons quelque chose comme ça. Vous voyez à quel point cela peut être flexible ? Belle ? C'est donc extrêmement utile lorsque vous souhaitez vous coiffer de manière aussi compétente en fonction de votre condition. Très bien, le suivant est le CSS en ligne. Conservez le code VS. Créons rapidement un nouveau composant appelé inline dot js. Générons le composant fonctionnel. Pour obtenir les styles en ligne, il suffit de créer un objet et appliquer à l'attribut style. Laisse-moi te montrer rapidement. Comme d'habitude, nous allons avoir une étiquette pour casque. Hein ? Nous sommes dans la balise head, je vais le faire, d'accord, donc en utilisant le CSS en ligne, nous devons appliquer l'attribut style. Donc, ici, je vais faire Style Equa. Supposons que vous vous dirigiez. D'accord, nous devons maintenant créer un objet correspondant à cette rubrique et implémenter cette ville directement à l'intérieur. Viens ici. Je vais faire const heading equa, le mettre sur un objet vide, n'est-ce pas ? Dans cet objet, nous devons implémenter cette taille de police tau. C'est donc sous forme de paire clé-valeur, non ? Je vais donc faire 100 pixels, plus calmement. Karla, le muscle va faire la tomate. Magnifique. Je veux donc que vous remarquiez que la taille de la police est indiquée par des virgules. Voici donc comment fonctionnent les styles en ligne GS. Nous n'avons donc pas eu à importer l'inline à partir de la barre oblique compétente. Mettons un commentaire sur le CSS normal. Ensuite, nous devons afficher l'image en ligne de plus près avec une étiquette à fermeture automatique. Enregistrez dans le navigateur. Et boum, c'est vrai, quelque chose ne va pas quelque part. Ce tau n'est pas appliqué à l'étiquette Head One. Très bien, jetons un coup d' œil à la ligne N. Oups, il y a une erreur typographique ici. Il ne nous reste donc plus qu'à apporter la correction nécessaire en supprimant le t. C'est donc censé être Style. Économisez et explorez. Tout fonctionne parfaitement comme prévu. Une chose dont je veux discuter avec vous, c'est que si vous voulez en styliser un autre, cliquez sur une étiquette, quelque chose comme ça. Faisons en sorte que ce soit facile à taguer cette fois-ci. Je vais lui donner un attribut de style. Nous devons maintenant créer un autre objet pour la balise H2. Donc, ici, nous allons faire de la constante. Disons ça de face. Nous allons avoir une taille de police de 50 pixels. Faisons en sorte qu'il soit bleu. Cela fait, nous devons appliquer ce tau en le référençant ici. Collez, enregistrez sur le navigateur et os. Tu peux voir ? Ainsi, lorsque vous utilisez le style intégré, vous devez créer un objet différent pour les attributs que vous souhaitez styliser. C'est tout pour le moment. Et dans la prochaine conférence, nous allons discuter du module CSS. Rendez-vous lors de la prochaine conférence. 24. Modules 24 Css: Les modules CSS, nos fichiers CSS dans lesquels nos noms de classes et animations sont définis localement par défaut, ce qui implique simplement qu'ils ne peuvent pas être utilisés en dehors de leur domaine. Et cela est très utile pour éviter les conflits dans le CSS. Donc, pour bien l'expliquer, nous devons utiliser les feuilles de style CSS habituelles et les comparer avec le module CSS. Ouvrez donc rapidement l'Explorateur puis juste au moment du SRC, nous devons créer la feuille de style CSS normale styles point css. Et juste au moment du SRC, nous devons maintenant créer le module CSS. Et je vais l'appeler mon point de styles d'application, extrait du module de convention point CSS. C'est au moins ainsi que vous nommerez votre module CSS. Revenons donc à la feuille de style normale, non ? Dans les feuilles de style classiques, nous allons avoir une classe d'erreur. Et je vais le styliser en spécifiant que la couleur doit être le rouge. Simple et court. À l'intérieur du module CSS, nous allons avoir une classe de réussite. Et bien sûr, la couleur sera verte. C'est aussi simple que cela. Passons à l'application. Railleries. Les droits se trouvaient dans le fichier app.js. Nous devons importer la feuille de style CSS normale, les styles d' application point css. La ligne occidentale consiste à importer le module CSS, et l'entrée est assez unique. Nous devons donc spécifier un nom. Dans ce cas, je vais l' appeler modules tours. Nous devons donc l'importer depuis dot slash, my app styles dot module dot CSS. Voici donc exactement comment importer le module CSS. Utilisons les fichiers CSS. Commençons donc par faire un commentaire sur les composants en ligne. Donc, juste en dessous, nous allons avoir une balise H2 dont le nom de classe est error. Donc le nom de cette classe c'est ce gars là, non ? Et puis je vais faire une erreur. Lorsque vous enregistrez dans le navigateur. Vous allez avoir une erreur ici. Implémentons-les donc rapidement pour le module CSS. Je vais en avoir une à étiqueter. Nous allons réussir, puis spécifier le nom de la classe. Le nom de la classe sera donc modulus towels socks x. Donc, ce style de module ici est le nom que nous avons utilisé pour faire référence au style de module CSS. Nous allons donc maintenant dire que le module tau met des points sur la classe de réussite elle-même qui a été définie. Par ici. C'est aussi simple que cela. Sauvegardons rapidement et voyons quel code pouvez-vous voir ? Magnifique. Et maintenant, c'est exactement là que le plaisir commence. Revenez à VS Squared. Permettez-moi de vous montrer la tête vers le fichier app.js, puis décommentons le fait que le G en ligne est en sécurité sur le navigateur. C'est le style issu des J en ligne. Oui. Maintenant, laisse-moi te montrer quelque chose. Cette balise h2 est destinée aux feuilles de style CSS classiques. Donc, si je copie ceci et que je le colle ici, directement dans la ligne, nous pouvons le faire comme ça. Et ici, je vais utiliser une flèche à partir de la ligne pour que nous puissions le différencier. Pouvez-vous également voir une erreur en ligne ? Nous avons l'erreur provenant du composant de l'application. Je veux que tu fasses attention ici. Retournez au fichier app.js. Et puis quand je copie le module CSS et que je le colle directement dans le CSS en ligne, comme ceci. Lorsque vous enregistrez dans le navigateur, nous allons rencontrer une erreur. Et il est dit que la serviette des modules n'est pas définie. C'est exactement ce dont nous parlons. Les modules CSS, nos fichiers CSS, dont tous les clusters, les noms et les animations sont définis localement par défaut. Ainsi, lorsqu'un module CSS est défini ici, vous ne pouvez pas l'utiliser dans un autre composant car il est limité localement. Compris, magnifique. Donc, lorsque nous le retirons de manière dangereuse, pouvez-vous voir que tout fonctionne parfaitement bien ? Et l'avantage du module CSS est qu'il permet de définir la portée du CSS en créant automatiquement un nom de classe unique du format. Deuxièmement, les modules CSS vous permettent d'utiliser le même nom de classe CSS dans un fichier différent sans avoir à vous soucier des conflits de noms. Qu'est-ce qu'un avenir prometteur au juste ? C'est tout pour le moment et j'espère que vous comprenez ce que sont les modules CSS. Prends soin de toi. 25. 25 Entrée de formulaire (Composant contrôlé): Dans cette conférence, nous allons discuter de la manière de travailler avec des formulaires dans React JS. Nous allons apprendre à capturer des données à partir de l'élément de formulaire , puis à rendre les données de capture disponibles pour soumission. En HTML normal. Forme, les éléments sont tous responsables à eux seuls de gérer les données saisies par l'utilisateur et de mettre à jour les valeurs respectivement. Ici, nous voulons réagir à un outil manuel et contrôler l'élément de formulaire. Ainsi, de tels éléments de formulaire dont la valeur est contrôlée et 100 par React sont appelés composants interprétés. Procédons rapidement en créant un nouveau composant dans le répertoire compétent. Nous allons créer un composant à partir d'un point js impute. Générez le composant fonctionnel. Donc je vais juste effacer ça. Nous allons avoir une entreprise dans le formulaire. Nous allons avoir une discussion, non ? Nous sommes dans la définition, nous allons avoir un label. Donc, ici, je vais faire un nom. Et ici, je vais tester le type d'entrée de plus près avec la balise à fermeture automatique. Donc, normalement, il ne s'agit que d'une impute HTML de base. Mais dans React, nous devons convertir cette entrée en imputes contrôlées. Pour ce faire, nous devons suivre trois étapes. La première étape consiste à importer le hook usted et déclarer la variable d'état qui contrôlera les périodes de formation. Importons donc rapidement le crochet américain. Et ici, nous devons déclarer les variables d'état à utiliser. Et dans ce cas, nous aurons des coûts, n'est-ce pas ? Nous sommes dans le tableau, nous allons avoir une virgule de nom, la fonction de configuration qui sera utilisée pour mettre à jour le nom. L'état initial sera donc une chaîne vide. Bonjour, d'accord, donc après avoir fait cela, affichons la valeur de manière dynamique. Ici. Je vais apporter de la valeur. Oups, jetez un œil. C'est censé être un nom. Et ici, nous allons faire un nom. Ouvrons la combinaison de composants de l'application pour ajouter un commentaire sur tous ces éléments ici. Au sommet. Nous devons importer à partir d'imputés, à partir de composants, réduire à partir d'imputés. Juste en dessous. Nous devons l'exécuter si vous formez pairs en toute sécurité sur le navigateur et boum, poussez-le un peu vers le haut comme ça. Agréable. C'est donc ce que nous avons navigateur. Mais pour l'instant, lorsque vous tapez dans le champ de texte, rien ne se passe. Pourquoi ? C'est simplement parce que nous devons spécifier le onchange afin de mettre à jour la valeur lorsque l'état change directement sur le code VS. On change un noyau. Nous allons nous occuper d'une fonction étroite ici. Nous devons appeler la fonction SetName pour mettre à jour l'état initial. L'onchange donnera donc accès aux événements et, à l'aide de l'objet d'événement, nous allons récupérer la nouvelle valeur que l' utilisateur saisira. Pour saisir la nouvelle valeur, nous allons créer des événements, des points, des cibles, valeur en points, qui est la valeur actuelle que vous saisissez dans les détails affichés. Cette valeur ici va mettre à jour l'étape initiale. C'est sûr, et essayons-le. Difficile en ce moment, ma souris est juste dans le champ de saisie, et je vais le faire Ababa. Tout fonctionne parfaitement comme prévu. Donc, pour comprendre comment fonctionne l'onchange, nous devons enregistrer le nom sur la console. Donc, ici, je vais enregistrer le nom console.log en toute sécurité sur le navigateur. Inspectons donc rapidement la console. À l'heure actuelle. Nous n'avons aucune douleur, n' est-ce pas, dans le champ de saisie. De plus, la console est vide. On suppose donc que nous avons une chaîne vide. Donc, quand je tape quelque chose comme ça, pouvez-vous voir maintenant que nous avons E sur la console et E ici, directement dans le champ de saisie. Pouvez-vous voir que c'est exactement ainsi que l'événement onchange est déclenché afin d'appeler la fonction de configuration pour mettre à jour l'étape initiale. C'est donc la fonction de configuration qui sera utilisée pour mettre à jour l'état initial. Et à l'aide de ces événements, nous serons en mesure de récupérer tout ce que l'utilisateur saisit dans le champ de saisie, puis de l'utiliser le champ de saisie, puis de l'utiliser pour mettre à jour l'état initial. Le plus simple, c'est que je parle trop. Continuons donc. Déclarer rapidement plus de variables d'état, les surligner et les dupliquer deux fois. Modifions-les pour les adresser. Nous devons définir l'adresse. Et cela va être biaisé. Dit q. L'état initial de ce champ va faire en sorte que React soit comme ça, accord, parce que nous voulons le faire ressembler davantage à une zone de sélection. Alors viens ici. Points forts des longueurs 102 lignes 18. Dupliquez-le deux fois. Très bien, donc pour cela, nous allons changer cela en adresse. La valeur sera adresse, qui est l'état initial. Nous devons donc appeler l'adresse. Viens ici. Donc, ici, les choses vont changer. J'ai aimé les lignes 29 à 35. Nous allons maintenant avoir un niveau de droits différent au sein du label. Je vais faire de la balance. Nous allons en avoir une sélection. Droits au sein de la sélection. Nous allons avoir les options, spécifiez la valeur. Réagissez. Donc, ici, je vais faire React. Il surligne, dupliquez-le trois fois. Ici, je vais avoir l'Angola. Nous allons donc avoir vécu des années comme ça, n'est-ce pas ? Enfin, nous devons également spécifier le onclick. Alors, à droite, dans le champ Sélectionnez et spécifiez la valeur. La valeur va être mise à l'échelle, ce qui correspond à l'état initial. Ensuite, le onchange sera égal à, nous allons utiliser une fonction anonyme ici, qui donnera accès à l'événement. Ensuite, nous allons appeler la fonction sets Q pour mettre à jour l'état initial. Ensuite, ciblons et saisissons les nouveaux attributs. Cible du point E, valeur du point. est aussi simple que cela. Lorsque vous enregistrez dans le navigateur, voyons si l' option de sélection fonctionne. Tu peux voir du beau ? Tout fonctionne parfaitement bien. Je les adore. Très bien, enfin, nous devons spécifier le bouton pour soumettre l'entreprise. Hein ? Où faisons-nous cela maintenant ? OK, faisons une autre discussion ici. Juste dans cette division, nous allons avoir un type de bouton de verrouillage qui sera submit, value. Soumettre. Ici, nous allons créer une bombe sûre. Tout fonctionne bien. Hein ? Enfin, nous devons définir une fonction pour la navigation. Faisons défiler la page rapidement vers le haut. Et puis, comme nous l'avons essayé ici, const, handle soumet une chorale. Ici, nous allons intégrer un événement à notre réception. Donc, pour éviter le rafraîchissement automatique des pages, nous devons appeler la commande prevent default. Je vais donc faire EV pour empêcher le défaut. Enfin, lorsque vous cliquez sur le bouton, nous voulons que la valeur du champ de saisie apparaisse dans la boîte de dialogue d'alerte. Nous allons donc utiliser ici l'interpolation de chaînes. Tout d'abord, nous avons le nom, nous avons l'adresse et enfin, nous avons la compétence. Hein ? Nous devons donc maintenant invoquer cette fonction directement, au sein de l'entreprise. Pour le faire. Tout d'abord, nous devons spécifier le onsubmit. Ensuite, je vais m'occuper, soumettre. Les données les plus simples. Lorsque vous enregistrez dans le navigateur. Allons y jeter un œil. OK, je réagis. Appuyons donc sur le bouton de soumission. Jette un coup d'œil. Pouvez-vous voir que l'entrée apparaît ici dans la boîte de dialogue d'alerte ? Donc, pour récapituler, lorsque vous créez un formulaire dans React JS, vous devez convertir le formulaire en composants contrôlés. Et pour ce faire, vous devez d'abord importer le hook did américain, puis déclarer les variables d'état nécessaires à utiliser. Ensuite, vous devez spécifier l'entrée , puis prendre l' état initial comme valeur. cela fait, Une fois cela fait, nous devons spécifier le changement plus haut, n'est-ce pas ? Formatons donc le code. Magnifique. Pouvez-vous voir que c'est au moins comment travailler avec le formulaire dans React Years. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 26. 26 Fragment réagir: Dans cette conférence, nous allons discuter de fragments. Un modèle courant dans React est qu'un composant renvoie plusieurs éléments. Les fragments nous permettent donc de regrouper une liste d'éléments enfants sans ajouter de nœud supplémentaire au dôme. Comprenons-le assez bien à l'aide d'un exemple. Très rapidement, dans le répertoire du composant, nous allons créer un nouveau package appelé Fragments demo, frog demo. Et juste au moment de la démo de Frog, nous allons créer un nouveau composant appelé fragment de démonstration. Cliquez avec le bouton droit sur Nouveau fichier. Des fragments de démonstration pointus. Générez le composant fonctionnel. Appuyez sur la touche Escape pour désactiver l'édition multiculturelle. Alors voilà, je vais juste effacer ça. Remplaçons le div par une balise Hadrien. Maintenant, je vais mettre en évidence la commande div D pour sélectionner plusieurs fois le div et l'effacer. Et maintenant, nous allons appuyer à nouveau sur la touche Escape pour désactiver le montage Monte-Carlo. Juste ici. Nous allons avoir un exemple de fragments. Très bien, alors laisse-moi te montrer quelque chose. Ici. Nous allons à nouveau avoir une étiquette, la fréquence cardiaque. Faisons-le de cette façon. Vous voyez, si vous observez l'écran, vous vous rendrez compte que l' application se plaint. Et lorsque vous passez votre souris dessus, cela indique des gestes, les expressions doivent avoir un élément parent. Pour répondre à la demande de l'application, nous devons regrouper l'expression GSS dans un élément parent. Donc rapidement, nous allons le faire ici, div. Donnons à ce div un nom de classe de conteneur. Points forts. Appuyez sur la touche Alt , puis sur la flèche vers le haut pour la déplacer. Magnifique. Enregistrez, affichons rapidement un composant dans l'application. G fait défiler l'écran vers le haut. Et ici, nous allons les importer ou des fragments à partir de fragments de démonstration de Component Slash Frog Demo Slash. Juste en dessous. Postez un commentaire à ce sujet. Nous allons les transformer en fragments. Plus près avec l'étiquette à fermeture souple. Assurez-vous d'enregistrer l'application. Et sur le navigateur. Boum, voyez-vous que tout fonctionne parfaitement comme prévu. Mais lorsque vous inspectez les éléments, cliquez avec le bouton droit sur Inspecter. Laisse-moi te montrer quelque chose. Ouvrez le corps et les droits. Dans le corps, vous allez voir un div avec l' identifiant des routes ouvertes, juste à l'intérieur de ce div, vous allez voir un autre div avec le nom de classe de notre application. Ouvrons. Et juste dans ce div, vous allez également voir un autre div avec le nom de classe du conteneur. Écoutez, nous avons tellement de nœuds parents ici, et cela pourrait ralentir les performances de notre application. Très bien, donc lorsque vous ouvrez le div ici avec le nom de classe du conteneur, vous allez voir la balise H2. Mais le problème est le suivant ce div avec le nom de classe du conteneur est nécessaire pour résumer les gestes, les expressions. Très bien, il sert donc de nœud parent. C'est-à-dire que Jess a des éléments. Mais le problème, c'est que nous avons tellement d'éléments liés aux parents ici. Et cela pourrait ralentir les performances de notre application. Ce que nous allons faire maintenant, c'est supprimer ce div. La seule façon de le faire est donc d'utiliser React Fragments. De l'héroïne au code VS. Ouvrez le fragment de démonstration. Nous devons donc effacer la différence. Vous voyez que l'application se plaint ? Maintenant, ce que je vais faire, c'est remplacer le div par des points, des fragments, des points forts de React. Appuyez sur la touche Alt de votre clavier. Appuyez sur la flèche vers le haut pour la déplacer. Et n'oubliez pas que nous devons formater le code. Magnifique. Inspectons donc l'élément. Pouvez-vous voir ici que vous allez voir un div avec le nom de classe de l'application. Précédemment. Dans ce div, vous avez un autre div avec le nom de classe du conteneur, qui est enregistré en tant que nœud supplémentaire. Mais maintenant, nous n'avons pas d' échantillon ici. Les nœuds supplémentaires qui ont été ajoutés ont donc disparu. C'est exactement la beauté de React Fragments. D'accord, cela permet donc de supprimer un nœud supplémentaire et d'améliorer les performances de votre application. Prenons donc rapidement un autre exemple. Ouvrez l'Explorateur. Bien, est-ce que The Frog ne ferait pas une démo ? Nous allons créer un composant appelé my table dot js, générique, les composants fonctionnels. Remplaçons donc le div par une table. Hein ? Nous sommes sur la table, nous allons avoir le corps de la table, juste à l'intérieur. Nous allons avoir la rangée du tableau. Donc, juste dans la ligne du tableau, nous allons avoir les deux points du tableau. Mais dans ce cas, la colonne sera conservée dans un composant séparé. Vite, créons le nouveau fichier de démonstration du composant Racket Construct, my column dot js RFC pour générer le composant fonctionnel, fermez l'explorateur. Donc, vers la droite, sur cette division, nous allons avoir les données de la table. Et ici, je vais vous présenter les points forts de mes compétences, les dupliquer. Donc, ici, je vais avoir React js. Passez donc au composant de l'application. Nous devons rendre ma table. Tout d'abord, il suffit de faire un commentaire à ce sujet. Fais une bêtise. Importons ma table depuis la démo compétente de Slash Frack Slash My Table. En bas. Nous devons faire apparaître ma table G de plus près avec ces étiquettes à fermeture automatique. Enregistrer. Cela fait, nous devons afficher correctement les composants de la colonne, l' intérieur du zéro, qui correspond à la ligne du tableau. Nous devons donc d'abord importer ma colonne depuis ma colonne. Bien sûr, il se trouve dans le même répertoire. Nous devons donc sécuriser mon côlon. Le navigateur et l'os. C'est beau ici ? Encore une fois, inspectons rapidement les éléments. Ouvrez le corps. Le div avec l'identifiant des racines. Nous avons un autre div avec le nom de classe AB. Ensuite, nous avons la table, corps de la table, le rôle de la table. Et maintenant, nous avons un nœud supplémentaire qui est ajouté à l'arbre, qui est ce div ici, ouvert. Et bien, dans cette division, nous avons les données du tableau. Ainsi, lorsque vous inspectez la console, vous verrez une flèche gênante là-bas. Pouvez-vous voir qu'il est dit que Validate DOM Nesting TDI ne peut pas apparaître en tant qu' enfant d'un Div. Permettez-moi de vous le montrer dans une colonne. Tu vois ce type ici. Il ne peut pas apparaître en tant qu'enfant d'une division. La seule façon de résoudre ce problème est donc de remplacer le div par un fragment. Maintenant, nous allons passer à commande D pour sélectionner toutes les occurrences de DV, effacer, et je vais créer des fragments de points réactifs. Sûr. Sur le navigateur. Nous devons rafraîchir la console. Paire. Je peux regarder, l'erreur a disparu. N'est-ce pas magnifique ? Haut ? J'adore ça. Très bien, je vais vous présenter les éléments. Viens ici. Maintenant, lorsque vous inspectez les éléments, le nœud supplémentaire qui a été ajouté à l'arborescence DOM a disparu. Nous avons donc ici le théorème du corps T et TD. Vous voyez que c'est exactement le point dont vous devez tenir compte lorsque vous travaillez avec une table. Le TDI ne peut donc pas apparaître dans un div. Nous devons plutôt inclure les éléments td dans un React Fragments. Le plus simple à faire. Il existe une syntaxe plus courte que vous pouvez utiliser pour déclarer des fragments. Et la syntaxe ressemble à ceci. Il suffit de sélectionner la commande D du fragment de points React pour sélectionner toutes les occurrences, puis les effacer. La balise vide que vous voyez ici est donc une autre façon d'écrire des fragments React. Lorsque vous enregistrez dans le navigateur, le résultat est exactement le même. Donc, les points clés que je veux que vous preniez note sont que lorsque vous utilisez la balise vide comme fragment de réaction, vous ne pouvez pas transmettre les attributs clés à manger. Les attributs clés ne peuvent être transmis qu' avec des fragments de points React. Laisse-moi te montrer rapidement. Pouvez-vous voir que l'attribut key est le seul attribut qui peut être transmis à un fragment de points React. Donc, lorsque vous faites quelque chose comme ça, en utilisant la balise vide comme fragment, cela ne fonctionnera pas pour vous. Les points clés à prendre en compte sont donc que la clé est le seul attribut qui peut être transmis à un fragment. Et à l'avenir, ils pourraient ajouter un support pour l' ajout d'attributs. Pour l'instant, la clé est le seul attribut qui peut être transmis au point 2 du fragment de réaction. Les fragments déclarés avec une syntaxe de fragment de points React explicite sont les seuls types de fragments pouvant prendre les attributs clés. C'est donc tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré sur « prenez toujours soin de vous ». 27. Introduction aux crochets: Qu'est-ce que les crochets exactement et pourquoi est-il important de les apprendre ? D'accord, alors qu'est-ce qui nécessitait réellement des crochets ? Avant de poursuivre ? Je veux être sûr que vous connaissez déjà les concepts de base de React js. Et vous connaissez des sujets tels que les composants fonctionnels, les invites, les états, les cartes, le contrôle , l'imputation, etc. Cependant, si vous êtes débutant, je vous suggère vivement de suivre mes appels individuels React js pour débutants afin de vous familiariser avec les concepts de base de React, puis de revenir aux crochets et de continuer avec les nôtres. Et maintenant, commençons. Ce qui est exactement intégré à React G, c'est que les hooks seront bientôt édités dans le système React 0.8, ce qui nous permet d' utiliser les fonctionnalités d'état et de cycle de vie sans écrire de classe. Très bien, cela implique donc que nous serons en mesure de nous connecter à l'état React, d' utiliser tous les états futurs des composants fonctionnels. En fait, en utilisant React Hooks, vous pouvez obtenir exactement les mêmes résultats en utilisant la méthode du cycle de vie. Et vous pouvez le faire avec moins de code. Nœuds techniques. React Hooks ne fonctionne qu'avec des composants fonctionnels. Maintenant, la question qui se pose est la suivante : qu'est-ce qui a nécessité des crochets ? Et pourquoi est-il important de savoir qui est le point numéro un ? Plus tôt, lorsque Reacts a été créé. Pour travailler avec des classes, vous devez bien comprendre ce mot clé en JavaScript. Et si vous êtes familier avec les scripts Java, vous savez qu'ils ne fonctionnent pas exactement comme dans les autres langages. Cependant, en ce qui concerne les React Hooks, vous n'avez pas à vous soucier de ces clés. Pourquoi ? C'est simplement parce que nous voulons l'utiliser à nouveau. Ça a l'air bien. Magnifique. Point numéro deux. Vous devrez toujours lier l' événement au composant de classe. Mais avec l'introduction des crochets dans les composants fonctionnels, plus aucune méthode contraignante. Et c'est, bien sûr, un énorme soulagement. Point. Numéro trois. Les classes mélangent le rechargement à chaud, très peu fiables. Tout simplement parce qu'ils ne se minifient pas très bien. Très bien, donc les classes mélangent rechargement à chaud, très floconneuses. Le point numéro quatre, les crochets , permettent d'interpréter une logique dynamique entre les composants sans modifier la hiérarchie de vos composants. Prenez note de ces points clés. Vous ne pouvez pas utiliser de crochets à l'intérieur d'un composant de classe. Les crochets ne fonctionnent que dans les composants fonctionnels. Très bien, les hooks ne peuvent donc être utilisés qu'en entreprise fonctionnelle et ils sont inefficaces au sein du composant de classe. Deuxièmement, les hooks ne contiennent aucune modification majeure et ils sont publiés, ils sont rétrocompatibles. En résumé, les hooks ou fonctions spéciales qui nous permettent de nous connecter à React States et à l' avenir du cycle de vie à partir d'un composant fonctionnel, par exemple s'ils utilisent ce hook , sont des crochets qui vous permettent d'ajouter React State à deux composants fonctionnels. Hooks vous permet de vous connecter à React Futures sans écrire de classe. Avec l'utilisation de crochets. Vous n'avez plus à vous soucier de ces mots clés. Enfin, cela nous permet de réutiliser la logique étatique. Nous avons maintenant une connaissance approfondie de ce qu'est React Hooks. Examinons cela de manière pratique lors de la prochaine conférence. C'est tout pour le moment. Fais bien de t'abonner. Et je te verrai lors de la prochaine conférence. Toujours concentré sur toujours prendre soin de vous. 28. 27 useState: Passons aux crochets usés en les utilisant pratiquement. Créez rapidement une nouvelle application React et donnez-lui un nom descriptif. Par exemple, vous pouvez décider de l'appeler entraînement au cerceau. De mon côté. Je l'ai déjà créé. Passons donc à VS Code. Ouvrez les clients de l'explorateur. Hein ? Nous sommes sur le SRC. Nous allons créer le répertoire des composants. Hein ? Dans le composant, nous allons créer un nouveau fichier appelé counter dot js. Générez les composants fonctionnels. Parfait. Très bien, parlons donc de l'utilisation de ce crochet. Ils utilisent ce hook une fonction spéciale qui prend l'état initial comme argument, puis renvoie un tableau de deux entrées. Le premier élément du tableau est utilisé pour stocker l'état initial. Le second élément du tableau est une fonction de configuration qui accepte les arguments utilisés pour mettre à jour l'état initial. Mettons-le rapidement en œuvre afin de bien comprendre de quoi je parle. Pour continuer. Tout d'abord, nous devons importer les utilisateurs qui viennent ici plus une virgule ici, ouvrir et fermer le crochet bouclé. Et je vais le faire comme ça. Comment peuvent-ils utiliser cette fonction spéciale du crochet, n' est-ce pas ? Nous devons donc l' invoquer comme ceci. Cette fonction prend l'état initial comme argument. Et dans cet exemple, l'état initial sera zéro, ce qui renverra alors un tableau de deux entrées, const array. Nous allons donc avoir des cônes, une virgule , un setCount, à attribuer comme ceci. Cette syntaxe est appelée structuration RE. C'est l'avenir de l' ES6. Le premier élément de ce tableau est une variable utilisée pour stocker l'état initial. Le deuxième élément est donc une fonction de configuration qui accepte un argument utilisé pour mettre à jour l'état initial c'est aussi simple que cette technique. L'état initial peut être un nombre, booléen, une chaîne ou un tableau. OK, donc ils peuvent tous entrer ici dans ce paramètre. Affichons rapidement le décompte sur le navigateur. Alors c'est vrai, nous sommes sur les GSA. Utilisons notre pack Hedge One pour afficher l'ouverture du compte et fermer les crochets. Ensuite, nous allons faire référence à l'état initial, qui est le compte qui est valide. Ce type. Le mélange de sauvegarde par points le plus simple pour exécuter votre application sur le terminal. Donc, avant de passer au navigateur, nous devons afficher ce composant dans l'application. G est juste là. Nous devons sélectionner entre la balise d'en-tête d'ouverture, la balise d'en-tête de fermeture. Tout en haut. Nous allons importer des cônes à partir de composants Slash, de cônes Slash. Alors, gérons le compte ici. Le plus simple, encore une fois, c'est de s'assurer de respecter l'obligation en toute sécurité. Sur le navigateur. Et des os. Vous pouvez voir ici l' état initial de la contre-application. Rendons-la plus belle dès maintenant. Je vais le faire ici, est-ce parfait ? L'objectif de cette conférence est donc de modifier l'état initial de notre application de contenu lorsque vous cliquez sur le bouton. Donc, pour cela, nous devons spécifier un vote, n'est-ce pas ? Quels sont les bateaux ? Nous allons spécifier le caractère onclick, onclick de ce bouton. Nous allons invoquer cette fonction de configuration. Donc, ici, je vais faire le décompte des sets. Ensuite, la fonction de configuration prendra en compte un argument qui sera utilisé pour mettre à jour l'état initial. Et dans ce cas, l' argument sera la clause des états initiaux, la nouvelle valeur de ce t. Permettez-moi de le faire glisser vers le bas. Fréquence cardiaque, et c' est un appel de fonction. Nous devons la convertir en fonction de flèche. Juste comme ça. Enregistrez sur le navigateur et sur les os. Essayons-le en cliquant sur le bouton Changer de bateau. Tu peux voir ça ? Parfait. C'est Lee, c'est ce que l'intention est. Pour récapituler. Si vous souhaitez utiliser ces données, React G est le premier, vous devez importer l' utilisation que peu importe espère. Ensuite, vous devez invoquer le crochet américain, puis passer à l' état initial comme argument. fois cela fait, vous devez l'attribuer à un tableau de deux entrées. Et nous sommes dans ce tableau, nous avons les premiers éléments qui sont une variable utilisée pour stocker l'état initial. Et le deuxième élément est une fonction de configuration qui accepte un argument utilisé pour mettre à jour les états initiaux. Et dans ce cas, l' argument ici est celui des états initiaux plus un. Très bien, donc pour la première fois, les composants s'affichent. Au lieu de cela, la variable est créée et initialisée à zéro. Maintenant, lorsque vous cliquez sur le bouton, la deuxième méthode sera invoquée, ce qui incrémentera le nombre actuel d'une unité. Ainsi, l'invocation de la méthode setColor provoquera un nouveau rendu des composants . Ensuite, les comptes contiendront la valeur actuelle qui sera ensuite affichée sur le navigateur. C'est donc aussi simple que cela. Deux règles d' impuissance doivent être prises en compte lors de l'utilisation de React Hooks. Règle numéro un, les hameçons ne peuvent être capturés qu' au plus haut niveau. N'appelez donc pas de hooks à l'intérieur d' une condition de boucle ou de fonctions imbriquées. Règle numéro deux, les hooks ne peuvent être appelés que dans la fonction React. C'est tout pour le moment et à la prochaine conférence. Concentrez-vous sur les soins holistiques. 29. 28 états de mise à jour sur la base de la valeur d'état: Dans cette conférence, nous allons apprendre comment définir l'état en fonction de la valeur de l'état précédent. Nous discuterons également de la différence entre cet exemple et l'exemple précédent que nous avons fait. Dans cette conférence, nous allons donc montrer comment incrémenter, décrémenter et même réinitialiser le compteur. Alors faisons-le rapidement. Le répertoire des composants ne le serait-il pas ? Nous allons créer un nouveau composant appelé compteur pour générer les composants fonctionnels. Importons donc rapidement le crochet Use that . C'est une fonction. Nous devons l'invoquer puis prendre l' état initial comme argument. Et dans ce cas, l'état initial sera nul comme d'habitude. Et cela renvoie un tableau de deux entrées, n'est-ce pas ? Je vais donc faire un tableau ici. Nous allons compter. Ensuite, nous avons la fonction de configuration pour mettre à jour les états initiaux attribuant la plaque. Cela a simplifié notre droit. Ceci étant fait, passons rapidement au GSS. Utilisons la balise Hadrien pour afficher le courant. Cela fait, nous devons implémenter le tableau Haynes. Tout d'abord, nous allons avoir ici des incréments qui seront dupliqués trois fois. Ici, nous allons avoir une décrémentation. Et ici, nous allons avoir des réinitialisations. Juste comme ça. Je spécifie le onclick. J'ai utilisé une fonction de flèche. Nous allons invoquer les dénombrements définis, puis transmettre le décompte initial plus la nouvelle valeur. Même chose ici. Je vais donc simplement copier, comparer, coller. La différence est donc qu'il s' agira d'une production. Pour la réinitialisation. Nous devons déclarer un nombre initial variable et constant . Equa Zara. Une fois que vous aurez cliqué sur ce bateau, nous voulons réinitialiser les compteurs de location. Je vais donc faire quelque chose comme ça maintenant. Concluons le tout dans un div. Déplacez-le aussi rapidement que possible pour formater le code. Parfait, vous voyez, chaque fois que je formate le code, vous obtiendrez une indentation appropriée. Ici, nous allons spécifier le OnClick. Nous devons donc régler le courant initial. OK, une fois cela fait, ouvrez l'application. Et ici, nous devons importer le tatouage depuis compteur de barres obliques compétent pour le rendre ici. Depuis l'obligation. Appuyons les commentaires sur le courant , comme dans l'exemple précédent. Découvrez-le sur le navigateur. Tu peux voir ? Essayons-le en cliquant sur l'équipe des foreurs d'incrémentation. Qui est belle. D'accord. Décrémentation, incrémentation, décrémentation, réinitialisation. Tout fonctionne parfaitement comme prévu. Le but de cette conférence est donc de mettre à jour l'état en fonction de la valeur de l'état précédent. Revenons donc à la caméra 2. Nous allons montrer cet exemple avec l'équipe Increment Borer. Ensuite, vous pouvez l' implémenter sur le reste du bouton, en cliquant sur ce bouton, nous allons appeler une fonction incréments. Et cette fonction serait définie en haut. Nous allons avoir des incréments constants, réglez-les selon notre fonction. Alors ici, nous allons régler le compte sur compter plus un. Enregistrez dans le navigateur. Et tout fonctionne toujours parfaitement comme prévu, n'est-ce pas ? Passons donc directement à la nature du problème maintenant. Supposons que dans cette fonction, nous voulions incrémenter le nombre de deux. Il est donc plus facile de faire quelque chose comme ça. Il suffit de les dupliquer et de les avoir comme ça. Lorsque vous enregistrez dans le navigateur, actualisez, cliquez sur le tableau d'incrémentation. Vous voyez que tout est incrémenté d'une unité ? Mais écoutez, nous nous attendions à ce que cette application soit incrémentée de deux. Mais maintenant, sur le navigateur, nous l'avons incrémenté d'une unité. Il semble que cela ne fonctionne pas bien. C'est donc l'un des inconvénients de l'utilisation d' CMS plus un pendant les années React. Permettez-moi donc de l'expliquer assez bien. Si vous regardez cela de plus près, vous vous rendrez compte que nous mettons à jour le même état plusieurs fois. Par conséquent, React regroupera toutes ces données en un seul lot et les exécutera une seule fois. Donc, même si nous le faisons un million de fois, laissez-moi vous le montrer comme ça. Enregistrer. Ils seront également incrémentés d'une unité. React va donc agréger toutes ces données en un seul lot et des données aussi précises. Vous ne verrez donc peut-être pas les effets de ce que vous avez fait ici car cela est même censé être incrémenté par MSE 123456. C'est donc censé être incrémenté de six, mais regardez, ce sont des incréments d'un. C'est donc l'inconvénient d'utiliser count plus one et react. Et maintenant, la question qui se pose est : pourquoi React of the State incarne-t-elle ? Ne t'inquiète pas. Je vous donnerai la réponse à cette question vers la fin de cette conférence. Résolvons donc rapidement ce problème. Pour résoudre ce problème, nous devons transmettre une fonction anonyme ayant accès à la valeur d'état précédente. Et maintenant, la syntaxe sera différente. Définissez les dénombrements. Bien, nous sommes dans cette fonction, nous allons effectuer les comptages précédents, régler sur notre fonction, puis nous allons avoir ici dénombrements précédents plus un, d'accord, les surlignages. Dupliquez-le. Donc, lorsque vous faites cela et que vous accédez au navigateur, rechargez, que vous atteignez l' incrément acheté, et vous voyez qu'il est incrémenté de deux. C'est aussi simple que cela. Tu vois ça ? Maintenant, l'application fonctionne comme prévu ? Croyez-moi, cela fonctionne effectivement comme prévu. Ici, nous avons transmis une fonction qui a accès à la valeur d'état précédente et nous l'avons incrémentée d'une unité. Nous pouvons donc également augmenter de cinq. Laissez-moi vous montrer un doublon, un doublon, un doublon, en toute sécurité. Sur le navigateur. Nous devons recharger les incréments de cinq. C'est aussi simple que cela. Donc, prenez par exemple que vous voulez incrémenter tous ces sommets de dix. Vous allez donc avoir une répétition de code comme celui-ci. Je n'aime pas ça. Faisons donc un peu de plomb pour la déshydratation ici. Maintenant, je vais faire pour que je sois égal à zéro. J'ai moins de deux ans et puis j'en ai plus, plus comme ça. Nous allons donc avoir ici la fonction définie. Donc, directement à l'intérieur, nous allons avoir accès à la valeur de l'état précédent. Ensuite, la valeur de l'état précédent plus un. Enregistrez dans le navigateur, actualisez-le par incréments. Vous voyez qu'il est incrémenté de deux ? Quand tu viens ici, tu en fais cinq. Enregistrez dans le navigateur, actualisez. Il est incrémenté de cinq. Cela nous ramène à la question suivante : pourquoi React Update State incarne-t-il ? Laissez-moi vous donner une réponse. La raison pour laquelle React of the Stadium badges est simplement parce que dans React js, chaque fois que l'état est mis à jour, le composant s'affiche à nouveau. Imaginons que nous l'ayons mis à jour des milliers de fois. Cela signifie simplement que notre composant va s' afficher des milliers de fois. Et c'est ce qui influe sur les performances de l'application. Réagissez, tendez le coup et avez décidé de mettre à jour, tout est resté par lots. Il va donc agréger toutes ces occurrences et les exécuter. D'accord, je comprends que cette conférence soit assez délicate, mais je vous suggère vivement de regarder la vidéo encore et encore pour vous en souvenir. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 30. 29 Objet comme variable d'état: Dans cette conférence, nous allons comprendre comment fonctionne l'objet avec la dette américaine, qui travaille dur, n'est-ce pas ? Alors allons-y. Nous sommes dans le répertoire des composants. Nous allons créer un nouveau compteur. Et je vais l'appeler compteur. Le point g est générique, le composant fonctionnel. Fermez l'Explorateur. Si vite. Importons l'utilisation qui accroche comme déclaré les variables d'état nécessaires à utiliser. Nous allons donc voir l'agente Mary porter cette panoplie. Nous allons avoir un coma pour les employés, un équivalent pour les employés, euh, non ? Dans cet exemple, la phase initiale sera un objet, à droite, pour voter pour ces objets. Nous allons avoir une colonne de nom, définissez-la sur une virgule vide. Nous allons avoir une colonne de pays, définissez-la également sur une chaîne vide. Très bien, donc l' état initial ici est assez différent de celui des conférences précédentes. Donc, le traitement de l'objet et l'utilisation ce crochet impliqueront une nouvelle approche. C'est très simple, donc je ne veux pas vous effrayer . Essuyons ça. Donc, dans le div, nous allons avoir une balise d'entrée et le type equa teste la valeur. Nous devons afficher la valeur de manière dynamique, le nom du point de l'employé. Cette imputation sera utilisée pour le nom inchangé si l'utilisateur commence à taper dans le champ de saisie. Ici, nous allons accéder aux événements, les configurer sur notre fonction, puis nous invoquerons la méthode set employee. Bien sûr, vous devez maintenant savoir que cela acceptera un argument qui sera utilisé pour mettre à jour l'état initial. C'est aussi simple que cela. Alors, quelles sont les parenthèses que nous allons prendre dans un objet, et je vais nommer ce point E cibles, valeur point. Magnifique. Fermons la balise d'entrée. OK, passons au formatage du code. C'est mieux. Points saillants de la ligne 72, lignes 11. Dupliquez-le. Donc, ici, ce sera le point country des employés. La ligne suivante consiste donc à afficher le nom du lieu et le pays dans le navigateur. Et nous allons avoir un div, juste à l'intérieur du div Disons une balise p et écrivons la balise p. Je vais le faire. Mon nom est employé, nom de point, les surlignements et le doublon sera employé. Mais pays. Alors voilà, je vais juste le faire, je viens du pays des employés. Ainsi, quel que soit le pays que vous saisissez dans le champ de saisie, il apparaîtra ici. Très bien, tellement en sécurité. Ouvrez l'application. Oui, nous devons le rendre ici. Et je vais en partie en comparer trois à partir des composants, de la barre oblique virgule trois et d'un commentaire sur Canvas également. Ensuite, nous devons rendre le nombre de trois points G plus près avec l'étiquette à fermeture automatique. Enregistrez dans le navigateur. Boum, parfait. Alors, tapons quelque chose dans le nom. Le nom est donc une double barre. Tout fonctionne pour le nom. Ainsi, lorsque nous commencerons à saisir dans le champ du pays, nous verrons que si nous ajoutons un comportement, pays sera vous. D'accord ? Pouvez-vous voir que lorsque vous le tapez dans le champ de saisie, le nom disparaît ici . Et quand vous commencerez à le taper dans le Nim FUD, le pays d'ici disparaîtra. Alors, qu'est-ce que c'est de près. Vous voyez maintenant également que lorsque vous commencez à taper dans le champ de saisie du pays, le nom est effacé. Très bien, alors permettez-moi de l' intégrer rapidement à vos rentes. OK, faisons-le ici. Faisons une autre division, non ? Et sur cette division, nous allons avoir une balise p, n'est-ce pas ? Nous sommes sur le tag P. Je vais faire une stringification par points JSON. Ensuite, nous devons référencer le coffre-fort de l'employé sur le navigateur et sur l'os. Vous voyez maintenant que nous avons le nom et que nous avons le pays. Ainsi, lorsque nous saisissons le nom dans le champ de saisie, il apparaîtra ici entre la chaîne. Et lorsque nous explorerons le pays, il apparaîtra également entre cette chaîne. Jetez-y un coup d'œil. Le nom sera donc une barre double. Lorsque je tape dans le champ du pays, voyez-vous que le nom disparaît et que le pays reste ? Cela se produit donc simplement parce qu'ils utilisent hook qui ne gère et ne met pas à jour automatiquement l'objet, contrairement à la méthode set state qui se trouve dans le composant de classe. La solution à ce problème consiste donc à utiliser l'opérateur de diffusion pour gérer et mettre à jour manuellement l'objet. Permettez-moi de vous montrer rapidement que c'est extrêmement simple. Donc, ici, nous devons répartir l'employé de cette façon. D'accord ? Ici aussi, nous devons répartir les employés. Cela vous aidera donc à gérer et à mettre à jour manuellement les objets. C'est plus simple que lorsque vous économisez. Très bien, essayons-le. Baba. Baba apparaît ici. Le pays, Royaume-Uni. Le Royaume-Uni apparaît ici. Tout fonctionne parfaitement en tant que spectateur. En conclusion, chaque fois que vous traitez des objets en tant que variable d'état, vous devez utiliser l'opérateur de propagation pour gérer et mettre à jour manuellement l'objet. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 31. 30 tableau comme variable d'état: Dans cette conférence, nous allons apprendre à utiliser un tableau comme variable d' état. Alors, dans le répertoire du composant, créez rapidement un nouveau fichier appelé hooks. Ils cliquent avec le bouton droit sur de nouveaux crochets de ventilateur, ce point g du tableau est RFC pour générer le composant fonctionnel. Fermez l'Explorateur. Déclarer rapidement une variable d' état à utiliser. Mais avant de continuer, nous devons d'abord importer le hook usted au niveau supérieur plus une virgule ici. Ouvrez et fermez les bretelles frisées, ustedes. Déclarez maintenant les éléments de la variable d'état. Nous devons définir les éléments. Et l'état initial sera un tableau vide. D'accord ? L'intention de cette conférence est donc d'ajouter des éléments à ce tableau. D'accord ? Les éléments que nous allons ajouter à ce tableau proviendront donc de l'entrée visualisée. Nous devons donc déclarer les variables d'état pour le champ d'entrée. Imaginons donc que nous voulions ajouter les noms des employés dans ce tableau. Et je vais le faire ici. virgule de l' employé définit l'employé comme étant égal à vous, et l'état initial sera une chaîne vide. Ainsi, tout ce que nous aurons ici sera ajouté à cette zone. Et la question qui se pose est comment pouvons-nous y parvenir ? Ne t'inquiète pas, je vais te le montrer dans un GC. Passons rapidement à l'interface utilisateur. Surligner. Ceux-ci, essuyez-les. Passons maintenant à un tag H2. Et je vais ajouter un employé. Juste en dessous. Nous allons avoir une saisie plus rapprochée avec l'étiquette à fermeture automatique. Et puis le type sera une valeur de test. Nous allons prendre en compte ce type ici, qui est cette variable qui contiendra l'état initial. Copiez-le et collez-le rapidement ici. Ainsi, lorsque l'utilisateur commence à les saisir dans le champ de saisie, nous devons récupérer les valeurs qu'il saisit. Donc, pour cela, nous devons spécifier le onchange. Juste ici. Nous allons prendre en compte la fonction d'erreur. Donc, dans la fonction d'erreur, nous devons invoquer la fonction de configuration des employés définis. Une fois cela fait, leur fonction ici nous donnera accès aux événements. Et à l'aide de cet événement, nous serons en mesure de cibler et de saisir la valeur saisie par l'utilisateur. Point de l'événement, cible, valeur des points. Le plus simple qui soit. L'intention est donc d'ajouter des éléments à ce tableau sur Boating Clique. Précisons donc rapidement le vote. Droit de vote En portant ce bateau, je vais utiliser des objets à l'intérieur du bateau. Nous devons spécifier leur propre CLI. Donc, en cliquant sur ce bouton, nous allons invoquer la fonction d'ajout d'éléments. Définissons rapidement cette fonction. Viens au sommet. Nous allons donc avoir une constante Ajouter des éléments. Réglez ceci sur notre fonction. Alors, dans le cadre de cette fonction, nous allons invoquer cette fonction de configuration des éléments d'un casque. Transmettons rapidement les ensembles de valeurs pour le tableau d'éléments. Et lors de la conférence précédente, nous avons appris que la fonction de configuration n'a pas la capacité de correspondre à une mise à jour. Ou dans le cas d'un tableau, on peut dire que la fonction de configuration ne peut pas ajouter d'élément à la fin du bail. Par conséquent, nous devons le gérer manuellement à l'aide d'un opérateur de propagation. Laisse-moi te montrer rapidement. Très bien, donc pour définir l'élément, nous allons avoir un tableau, puis répartir le tableau d'éléments. Enfin, nous allons lancer un nouvel objet. C'est aussi simple que ça, non ? Nous sommes dans ce nouvel objet. Nous devons spécifier les éléments d'identification, les points, les terrains, car nous voulons un identifiant qui sera utilisé pour identifier de manière unique les éléments qui seront ajoutés au tableau. Nom de l'employé. Donc, ici, directement dans cet objet, vous pouvez ajouter autant de données que vous le souhaitez. Donc, par exemple, si je veux ajouter l'adresse des employés, il suffit de dupliquer la variable d'état et de spécifier les variables et la fonction setter. Alors viens ici plus calmement. Vous pouvez l'ajouter ci-dessous. Le plus simple est qu'une fois cela fait, nous allons rapidement cartographier ces éléments. Faisons-le juste en dessous du bas. Je souhaite utiliser le tag UL. Hein ? Dans l'étiquette UL, nous allons avoir les accolades, puis les objets, la carte à points. La méthode cartographique. Nous allons utiliser une fonction de flèche, puis ouvrir et fermer des parenthèses. Hein ? L'erreur ne fonctionnerait-elle pas. Nous allons transmettre un paramètre. Ce paramètre représente chaque élément de la liste. Ensuite, nous devons l'afficher à l'écran. Et je vais le faire, je vais utiliser le tag LI. Spécifiez que la clé doit être l'identifiant de l'élément. Et à droite, dans le code HTML interne, nous allons avoir les points de l'élément , le nom, qui est ce nom ici, l'identifiant et le nom. Exécutons ce composant correctement, dans l'application Js. Nous devons importer ce tableau de crochets à partir des barres obliques des composants. Est-ce que RA a fait un commentaire à ce sujet ? Viens ici. Rendez, accrochez-le, Ira, en toute sécurité dans le navigateur. Et boum, Beautiful. Allons y jeter un œil. Ici. Je vais saisir. Un bar, dans lequel le premier employé et moi tapons sur le tableau sont ajoutés. Nous allons avoir le micro C Boom. OK, donc nous allons avoir ce nom ici. C'est cher à mon cœur, n'est-ce pas ? Tout fonctionne parfaitement comme prévu. J'enseigne bien, c'est beau. Revenez au code VS et laissez-moi vous expliquer ce qui se passe sous le capot. Il se passe donc quelque chose ici et je dois l'expliquer simplement pour que tout le monde le comprenne suffisamment bien. Passons à la fonction. Avant de poursuivre, formatons rapidement le code. Parfait. Il a l'air propre et je l'adore. D'accord, donc lorsque la fonction Ajouter un élément est appelée, cette fonction de configuration s'active. Nous faisons donc une copie de tous les éléments du tableau à l'aide l'opérateur de propagation vers la liste des éléments copiés. Nous ajoutons ensuite un nouvel objet. Et ce faisant, nous n'écrasons pas le tableau d'origine. Cela l'ajoutera en fait à la fin du bail. Donc, en résumé, lorsque travaillez avec un tableau en tant que variable d'état , vous devez d' abord créer une copie des éléments à l'aide de l'opérateur de propagation. Cela fait, vous devez ajouter un nouvel élément et le transmettre comme argument à notre fonction. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Cours soigneux et soins holistiques. 32. 31 Organiser le code: Bon retour à tous. Dans cette conférence, nous allons donc organiser la structure des dossiers. Ouvrez l'Explorateur, directement dans le répertoire de l' entreprise. Nous y jetons un coup d'œil, créons un nouveau répertoire appelé usted practice. Nous allons donc maintenant copier tous les fichiers liés à l'utilisation qui se connecte aux États-Unis. J'ai pratiqué la nourriture. Maintenez la touche de commande de votre clavier enfoncée. Touchez pour sélectionner les fichiers associés. Glissez-le et déposez-le aux États-Unis. Je me suis entraîné. Cliquez sur Déplacer. Parfait. Nous avons donc maintenant le répertoire et les droits compétents dans le répertoire des composants. Les États-Unis se sont entraînés, qui contiennent tous les fichiers liés à l'utilisation des hooks Git. Parce que nous allons pratiquer de nombreux crochets dans ce cours. C'est donc bien. Nous organisons notre structure de dossiers. Maintenant, le problème ici est que les entrées seront manquantes. Fermez l'Explorateur. Ensuite, voyons ce qui se passe. Droits relatifs à la terminologie. Vous voyez que nous avons un problème avec les entrées. Pouvez-vous voir si c'est juste, résolvons le problème rapidement. Revenez au composant de l'application, car c'est ici que se trouvent presque toutes les importations. Enlevons donc rapidement tous ces trucs et repartons de zéro. Comme ceux-là. Le compteur d'importation à partir de composants Slash Slash utilisé son compteur de barres obliques d'entraînement. Tu pourras faire le reste à la fin. Ne comprends pas, n'est-ce pas. Donc, lorsque vous consultez le navigateur, tout fonctionne parfaitement comme prévu. Donc, dans la prochaine conférence, nous commencerons à pratiquer l'utilisation de ces crochets. C'est souvent à nous de vous voir lors de la prochaine conférence. 33. 32 useEffect Intro: L'effet américain est un crochet pour encapsuler du code lié aux effets secondaires. Et c'est une combinaison de composant monté, composant, mis à jour. Le composant va être monté. Les composants précédemment fonctionnels n' ont pas accès au cycle de vie des composants. Mais avec le crochet d'effort américain, vous pouvez tirer parti des contrats à terme cycliques. Par conséquent, nous pouvons dire que l'utilisation de crochets d'effort vous permet de provoquer des effets secondaires sur vos composants. Parmi les exemples d'effets secondaires, citons la récupération de données et la mise à jour directe du dôme. Minuteries. En termes de simplicité, ils utilisent syntaxe d' effets qui ressemblera à ceci. Si vous souhaitez utiliser l'effet américain. Tout d'abord, vous devez l' importer en haut. Ils utilisent l'effet comme une fonction, nous devons donc l'invoquer. C'est ici que Lee commence à s'amuser. Très bien, maintenant, je veux que vous croisiez les mains et que vous prêtiez attention à mon explication. Et s'il vous plaît, ne vous joignez pas à moi pour taper du code. L'effet américain est donc une fonction qui écrit. Et ici, nous avons invoqué la fonction. La fonction prend en compte deux paramètres. Le premier paramètre est une fonction exécutée après chaque rendu. Très bien, ce qui implique simplement que chaque fois que le composant s'affiche, la fonction sera appelée. Le premier paramètre de l'effet américain est donc une fonction qui est appelée après chaque rendu. Ce type est là. OK, laisse-moi le préparer pour que tu puisses comprendre l'essentiel. Il s'agit du premier paramètre de l'effet US, qui est une fonction exécutée après chaque rendu. Et le deuxième paramètre est un tableau vide , communément appelé tableau de dépendance. Donc, pour cela, il suffit de placer une virgule ici , puis de prendre un tableau vide. Il s'agit donc du premier paramètre des effets américains. Et puis c'est le deuxième paramètre des effets américains. Ce gars ici s' énerve après chaque rendu. C'est ce qu'on appelle l'effet. Cette fonction, ici même aux États-Unis, est appelée effet lorsqu' un tableau de dépendances vide est transmis comme deuxième argument pour réutiliser le hook d'effets Cela signifie simplement que les effets utilisés ne s' exécuteront que lors du premier rendu. Ainsi, chaque fois que le composant s'affiche à nouveau, l'effet ne s'exécutera pas. C'est exactement l'utilisation de la dépendance vide RA. Un autre point important est que vous pouvez également conditionner les effets à l'aide des sondes ou de la valeur d'état. Et vous le faites en le transmettant, n'est-ce pas ? Nous faisons partie de cette liste. Dans la prochaine conférence. Lorsque nous commencerons les implémentations, vous le comprendrez certainement assez bien. Très bien, ce n'est donc qu'un aperçu de ce qu'ils utilisent. L'effet est. Un autre point important que je souhaite que vous preniez note est que l'effet américain est défini à l'intérieur du composant. Ce faisant, nous pourrons accéder à l'état et aux sondes sans avoir à écrire de codes supplémentaires. Formatons donc rapidement ce code pour qu' il soit plus beau. Parfait. Donc, pour récapituler, avant d' utiliser ces effets, vous devez d' abord les importer au niveau supérieur. L'effet américain joue ici un rôle. Nous devons donc l' invoquer ici. étant fait, l'effet américain accepte deux paramètres. Le premier paramètre est une fonction d'erreur, qui dans ce cas est l'effet. Et le second paramètre est un tableau vide. Je n'ai pas compris tout cela. Nous pouvons probablement dire que le second argument contribue à produire un effet conditionnel. Disons que c'est pratiquement le cas lors de la prochaine conférence ? On se voit alors. 34. 33 Composant a monté et mis à jour: Dans cet exemple, nous allons créer une application très simple qui met à jour le titre du document lorsque vous cliquez sur le bouton. Nous allons donc imiter le composant qui a été monté et le composant s' est mis à jour rapidement dans le répertoire des composants. Créons un nouveau package appelé user effect practice. Commande B. Pour ouvrir l'explorateur, cliquez avec le bouton droit sur le composant, nouveau dossier. Hein ? Nous sommes dans la pratique des effets aux États-Unis. Nous allons créer un nouveau composant appelé Effet. Exemple : un point g génère le composant fonctionnel. Oublions donc les effets secondaires pour le moment et créons une simple contre-application. Importe rapidement le crochet Use that. Déclarons la variable d'état nécessaire à utiliser. L'état initial sera un nombre, et dans ce cas, il sera zéro, n'est-ce pas ? À l'intérieur du corps. Nous devons afficher le décompte. Ensuite, nous allons faire une balade en bateau et cliquer sur ce bouton. Nous allons mettre à jour l'état initial. Je vais donc juste cliquer. Et ici, nous devons le spécifier en un clic. Au clic, nous allons appeler la fonction SetCount. Et bien, dans le paramètre, nous allons prendre en compte l'état initial les nouvelles mises à jour. Enregistrez, ouvrez les composants de l'application et il pleut moins ici. Nous allons donc importer le premier exemple d' effet à partir de la barre oblique du composant utilisé si, dans la pratique, l' exemple d' effet de barre oblique est un exemple. Juste ici. Laissez-nous faire un commentaire à ce sujet. Faisons le premier exemple d' effet. Safe on the browser and bone are right. Tout fonctionne parfaitement bien. Tu peux voir ? OK, laisse-moi faire quelque chose de beau. Personnalisons cette application. Il me suffit donc de supprimer le clic directement dans le code HTML interne. Et je vais l'indiquer avec le signe plus, économisez sur le navigateur et boum, soyez plus belle comme ça. Je l'adore. Zoomons sur la bilirubine. C'est ce qu'on appelle, le but de cette conférence est de mettre à jour le titre du document lorsque l'on clique sur le bouton. Faisons-le en mettant en œuvre les effets d'utilisation. Pour mettre en œuvre l'effet américain. Tout d'abord, nous devons l'importer. Ils utilisent l'effet est également une fonction. Nous devons donc l'invoquer. Viens ici, et je vais utiliser des effets. L'utilisation de crochets AT accepte une fonction comme argument qui est exécutée après le rendu du composant. Et ce sera une fonction d'erreur. Donc, la fonction qui est passée en argument, n'est-ce pas ? Aux États-Unis, si la fonction At-Hook est appelée effet, d'accord ? Nous appelons donc cette fonction effet. Bon, quels que soient les effets, nous allons mettre à jour le titre du document. Le titre du document est égal à point. Disons ce que je vais faire et ce que je vais faire. Vous avez cliqué sur Compter les fois. Nous ne faisons donc que passer le compte ici. D'accord ? Lorsque vous enregistrez et revenez au navigateur, cliquez à droite sur le bouton plus. Voyez-vous qu'en observant attentivement, vous vous rendrez compte que le titre est mis à jour. Quand je clique, voyez-vous, maintenant, il est indiqué que vous avez cliqué deux fois. J'espère que tu peux le voir. Très bien, au départ le titre du document se lit zéro fois. Ainsi, lorsque nous cliquons sur le bouton, les composants seront à nouveau affichés. Et une fois le composant rendu, l'utilisation de ce hook sera appelée. Cliquez sur Pouvez-vous voir et maintenant vous avez cliqué une fois. Cliquez à nouveau, vous avez cliqué deux fois. Et juste comme ça. Ainsi, chaque fois que je clique sur le tableau, l'état est mis à jour et le composant s'affiche à nouveau. Lorsque le composant s'affiche à nouveau, le hook d'effet américain se déclenche, puis le titre du document prend la valeur de comptage mise à jour. Cela implique donc simplement que l'effet américain Hooke est appelé après le rendu du composant. Nous pouvons donc maintenant voir que le comportement de cette application est exactement comme prévu. Je vais vous expliquer ce qui se passe sous le capot. Pour provoquer des effets secondaires sur les composants fonctionnels. Tout d'abord, nous devons importer l'effet américain. Qui ? L'effet américain qui est une fonction, nous devons l'invoquer. Après cela, nous allons passer une fonction en argument, n'est-ce pas ? Dans le cadre de la fonction US IF. Donc, directement dans l'effet, nous définissons le titre du document à l' aide de l'API du navigateur de titres de documents. Donc, tout ce que vous avez ici dans cette fonction anonyme disparaîtra après le rendu du composant. Ainsi, lorsque les rendus React les accompagnent, il se souviendra des effets que nous avons utilisés. Exécutez ensuite nos effets après avoir mis à jour le dôme. Cela se produit pour chaque rendu, y compris le premier. Prenez note de ces points clés. Point numéro un, les effets américains s'exécutent après chaque rendu. Point. Deuxièmement, l'effet d'utilisation est défini à l'intérieur des composants. Ce faisant, nous aurons accès à ces données et à ces sondes sans avoir à écrire de code supplémentaire. C'est pourquoi nous avons pu accéder au titre du document. Pour récapituler, chaque fois que vous souhaitez utiliser l'effet américain, vous devez l'importer depuis le module React après les entrées. Vous devez l' appeler directement dans le composant comme ceci. Donc, juste à l'intérieur de la fonction, nous allons prendre une fonction de flèche comme argument. Donc, c'est vrai, lorsque la fonction d'erreur est l'endroit où la transformation a lieu, fois le composant rendu, cette fonction est bloquée. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 35. 34 Effet à exécution conditionnelle: Dans cet exemple, nous allons apprendre comment exécuter des effets de manière conditionnelle. Dans la conférence précédente, nous avons appris que l'effet 2k est appelé après chaque rendu. Et dans la plupart des cas, l' appel des effets après chaque rendu peut créer un problème de performance. Nous avons donc besoin d'un moyen d' exécuter des effets de manière conditionnelle dans un composant fonctionnel. Mettons-le rapidement en pratique afin de bien le comprendre. Créez rapidement un nouveau fichier intitulé Exemple d'effets Dans le cadre de la pratique des effets aux États-Unis, nous allons avoir le deuxième exemple d'effet. Dots, Jeers génère le composant fonctionnel, fermez l'explorateur ou le magnifique m phi. Comme d'habitude, nous devons importer les ustedes et ils ont un effet, car les femmes sont des images de Bouddha. Donc, ce que nous allons faire, c'est tout copier à partir de l' exemple d'effet ci-dessous. Exemple d'effet 1 : surligne la copie. Viens ici. Il suffit de coller. Ensuite, nous allons modifier les composants pour appliquer le deuxième exemple. Donc, ici, il ne nous reste plus qu' à appliquer l'exemple 2. Sûr. Ouvrez également le composant de l'application. Nous devons rendre un exemple d'effet pour importer un exemple d'effet. Deux points g sont venus ici, placez un commentaire à ce sujet. Ensuite, nous allons afficher un exemple d' effet à enregistrer. Revenons à l'exemple 2. Donc, ici, nous allons accéder au journal de la console. L'effet d'utilisation s'appelle Enregistrer l'application et récupérer le navigateur. Cliquez sur le bouton. Tout fonctionne comme prévu. Lorsque nous inspecterons la console, vous verrez le résultat attendu. L'effet d'utilisation est appelé. Maintenant, je veux te montrer quelque chose. Implémentons rapidement le champ de saisie. L'utilisation est importée en haut. La variable d'état se trouve ici. Nous devons maintenant créer la variable d'état pour le champ de saisie. Supposons le nom, setName. Vous déclarez. Et l'état initial sera une chaîne vide. Il peut s'agir de guillemets doubles ou d'un guillemet simple. De ces deux, ils disparaîtront. Très bien, implémentons rapidement le champ de saisie. Faisons-le juste en dessous du bas. Fermez-le à l'aide de l'étiquette à fermeture automatique. Ici, je vais taper, tester la valeur. Ce sera un nom. Donc inchangé, c'est-à-dire lorsque l'utilisateur commence à taper dans le champ de saisie appelé fonction d'erreur, qui donne ensuite accès aux événements. OK, appelons la fonction de nom de l' ensemble. Donc, à l'intérieur du paramètre de la fonction SetName, nous allons utiliser les événements pour récupérer tout ce que l'utilisateur saisit dans le champ de saisie. E Dots, valeur du point cible. Je pense que vous devriez maintenant assez bien comprendre l'événement Onchange. Une fois cela fait, dirigez-vous vers le navigateur À moins de vérifier le comportement, nous devons actualiser la console. Maintenant, quand je commencerai à taper dans le champ de saisie, nous allons rencontrer un comportement étrange. Alors je le fais au bar. Pouvez-vous voir que lorsque vous tapez dans le champ de saisie, l'effet américain est appelé. Tu peux voir ça ? Nous avons maintenant ressenti l'effet américain à sept reprises. Mais écoutez, notre intention est d' appeler les effets uniquement lorsque vous cliquez sur le bouton. Ainsi, lorsque vous cliquez également sur le bouton, l'effet utilisateur est également appelé. Et lorsque vous tapez quelque chose dans le champ de saisie, l'effet d'utilisation est également appelé. Cet appel n'est donc pas pertinent et ralentira certainement les performances de l'application. Ce n'est pas optimal. La solution à ce problème consiste à invoquer conditionnellement l'effet américain uniquement lorsque la valeur de comptage est mise à jour. Parce que notre intention ici est de mettre à jour le titre du document lorsque vous cliquez sur le bouton de cette manière, pouvez-vous le voir ? Nous voulons donc que les effets ne se déclenchent que lorsque vous cliquez sur le bouton. Mais dans ce cas, si vous saisissez quelque chose dans le champ de saisie, effet utilisé s'appelle faire quelque chose comme ça. Tu vois que toutes ces choses ne sont pas pertinentes ? Réglons le problème rapidement. Nous avons appris dans la conférence précédente que l'utilisation d'une fonction vectorielle accepte deux paramètres. premier est heureusement l'effet lui-même, et le second est le tableau de dépendances situé ici. Pour mettre fin à ce problème, nous devons spécifier ici la deuxième virgule du paramètre, puis nous allons utiliser un tableau vide. Cette application dépend donc des dénombrements pour être mise à jour. Lorsque les dénombrements sont mis à jour, nous souhaitons que le document lié soit également mis à jour. On peut donc dire que l'application dépend de la variable count. Nous devons donc prendre en compte le compte. Cela signifie que l'effet se déclenchera lorsque le décompte sera mis à jour. C'est donc au moins comment exécuter un effet de manière conditionnelle. Lorsque vous enregistrez et revenez au navigateur. Nous devons actualiser le navigateur et également actualiser la console. Maintenant, lorsque vous appuyez sur le bouton plus, l'effet est appelé et le titre du document est détaillé. Encore une fois. Il donne les mêmes résultats. Lorsque nous commençons à taper dans le champ de saisie. Vous voyez que nous n'avons plus l'expérience d'ajouter du comportement. Maintenant, notre effet est appelé lorsque le courant est mis à jour. Tu peux voir ? Essayons-le à nouveau, rafraîchissons-le. Quand je le tape dans le champ Empereur, rien ne se passe. L'effet n'est pas appelé simplement parce que nous voulons qu'il soit appelé lorsque le décompte est mis à jour. Donc, lorsque j' appuie sur le bouton plus, les composants seront à nouveau affichés. Et une fois le composant rendu, l'effet sera capté. Vous voyez une console technocratique ? Tout fonctionne parfaitement comme prévu. Désormais, l'effet n'obtient du code que lorsque le nombre de variables d'état est mis à jour. C'est tout pour le moment. Dans la prochaine conférence, nous allons en apprendre davantage sur la fonction américaine de nettoyage des effets. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 36. Fonction de nettoyage à effet: Dans cette conférence, nous allons approfondir nos connaissances sur les news effect hooks. Précisément. Nous allons discuter de la fonction américaine de nettoyage des effets. Alors, en quoi consiste exactement la fonction de nettoyage des effets ? La fonction de nettoyage est une fonction induite par un crochet qui nous permet de mettre de l'ordre dans le code avant que notre composant ne soit monté. Cependant, l'effet américain 2k est conçu de manière à ce que nous puissions renvoyer une fonction directement à l'intérieur de celui-ci. Et cette fonction de retour est exactement là où le nettoyage intervient. La fonction de nettoyage prévient les fuites de mémoire et supprime certains comportements inutiles et indésirables. Des techniques. Vous ne pouvez pas mettre à jour l'état dans la fonction de retour. Donc, pour cet exemple, nous allons créer une application simple qui verrouillera la position de notre souris sur la console, commençant par les coordonnées x et y. Alors c'est vrai, nous allons utiliser une pratique efficace. Créons rapidement un nouveau composant appelé effets. Exemple 3. Générez le composant fonctionnel. Importons rapidement l'utilisation de ce crochet et ils utiliseront l'effet. Des effets plus calmes. Le plus simple qui soit. Donc, pour les coordonnées x et y, nous allons déclarer la variable d'état nécessaire à utiliser, droite, dans le composant. Nous allons avoir une constante x virgule mise à x égale. Utilisez-le dans l'état initial, ce sera un nombre. Dans ce cas, zéro surlignage et doublon. Voici pourquoi nous devons définir y le plus simple pour définir la fonction permettant d' enregistrer la constante de position de la souris. Prenez des événements, réglez-les sur notre fonction, et nous allons ouvrir le journal de la console. Il s'agit d'un événement sur la souris. Juste ici. Nous devons appeler la fonction de configuration pour le x et écrire en utilisant la fonction, nous allons obtenir la coordonnée X, le point, le client x , les surligner et les dupliquer. Nous allons donc obtenir y. Nous devons donc appeler la fonction de configuration pour y ou beautiful. Appelons rapidement l'effet d'utilisation. Juste en dehors de cette fonction, qui se trouve dans le composant, nous allons invoquer l'effet américain. Et l'effet est une fonction qui prend en compte deux paramètres. Le premier paramètre est une fonction de flèche. Et le deuxième paramètre sera le tableau de dépendances. Mais pour l'instant, restons comme ça. Alors, c'est vrai, lorsque la fonction anonyme que nous allons enregistrer sur la console, Use effect est appelée. Et ici, nous voulons ajouter l'écouteur d'événements. Points de fenêtre, ajoutez un écouteur d'événements. Nous allons donc l'avoir sur Mouse Move. Lorsque vous déplacez la souris sur le navigateur, nous voulons sélectionner les coordonnées x et y. Déplace la souris Kolyma. Ensuite, nous allons invoquer la position de la souris dans le journal. Je suis là Est-ce le plus simple qui existe dans le corps ? Nous allons afficher la position. Utilisons une balise p pour coordonnées x et y. C' est sûr. est sûr. Nous devons le rendre dans l'application js. Viens ici. Nous devons importer le troisième exemple d'effet à partir de l'effet de barre oblique du composant. Exemple 3 : faits saillants. Postez un commentaire à leur sujet. Fermez-le à l'aide de l'étiquette à fermeture automatique. Enregistrer. Regardons le résultat sur le navigateur. Et moi pour ouvrir la console. Très bien, donc lorsque vous déplacez votre souris, pouvez-vous voir, vous pouvez maintenant voir la position de la souris sur l'écran. Mais une chose que nous n'aimons pas, c'est que chaque fois que nous déplaçons la souris, l'effet est appelé. L'effet est appelé à chaque fois que le composant s'affiche à nouveau. Très bien, nous devons maintenant conditionner l'effet en passant le deuxième argument, qui dans ce cas sera un tableau vide. Ainsi, lorsque nous spécifions le tableau vide, nous disons pratiquement à React que cet effet ne dépend d'aucune sonde ou qu'il est resté. n'y a donc aucune raison qualifier cet effet sur les conséquences de restitutions, ce qui implique simplement qu' il ne sera détecté que pour la première fois après le rendu du composant. Passons le tableau vide comme deuxième paramètre. Fais une bêtise. Et ici, nous devons le séparer par une virgule, puis prendre un tableau vide, enregistrer dans le navigateur. Rechargeons. Pouvez-vous voir que l' effet est appelé fois que le composant s'affiche pendant un faux temps ? Maintenant, lorsque je déplace ma souris, l'effet ne se refroidit plus. Vous voyez, maintenant nous n' avons que le plus grand nombre coordonnées enregistrées dans la console. Mais lorsque je supprime le tableau de dépendances, chaque fois que vous déplacez la souris , les composants s'affichent à nouveau. Et puis ça va faire exploser ce gars ici présent. Maintenant C, jette un œil. Pouvez-vous voir lorsque je déplace la souris, le composant s'affiche à nouveau et l'effet qui se déclenche ? Et bien sûr, nous ne voulons pas que les effets se déclenchent à chaque fois que nous déplaçons la souris. Par conséquent, nous devons spécifier le tableau vide comme ceci. Lorsque vous spécifiez le tableau vide, les effets se déclenchent une fois que les composants s' affichent à une heure erronée. Donc, si les conséquences se reproduisent, l'effet ne se calmera plus. Donc, s'il ne reste que quelques mois, vos effets se font attraper, seulement un. Vous devez spécifier la dépendance vide RA et visiter. Magnifique. C'est souvent activé sur n, Save lors de la prochaine conférence. 37. 36 Composant se démontera: Bon retour à tous. Dans la conférence précédente, nous avons appris à imiter montage d' un composant avec un effet américain. Dans cette conférence, nous allons donc apprendre comment utiliser les composants parmi les fonctionnalités disponibles à l'aide de l'effet. En gros, ce que nous allons faire dans cette conférence est de créer des composants de conteneur pour l'exemple de masse de logs que nous avons implémenté dans la conférence précédente. Hein ? Dans le conteneur, nous allons ajouter le bouton qui sera utilisé pour activer l'affichage des composants. Créez donc rapidement un nouveau fichier appelé mom's container. Donc, dans le cadre de la pratique des effets, créer un nouveau fichier appelé conteneur de souris point g est générique, le composant fonctionnel. Importons rapidement les États-Unis qui ont fait qui. Nous devons également importer l'effet Exemple 3. La ligne suivante consiste donc à déclarer la variable d'état nécessaire à l'affichage. Donc, ici, je vais invoquer le fait hook américain. Ensuite, nous allons faire venir l'écran ici. Cela doit être écrit en virgules et l'état initial sera vrai. Cela fait, c'est vrai, nous sommes dans les GSA. Il n'y aura pas de bouton supplémentaire pour faire passer la variable d'affichage entre vrai ou faux. Basculez l'affichage. Spécifiez le OnClick. Nous allons donc invoquer la fonction de configuration pour un affichage défini. Maintenant, nous allons avoir ici beaucoup d'écran haut, n'est-ce pas ? Donc, lorsque vous cliquerez sur ce bouton, nous passerons de vrai à faux, d'accord ? Chaque fois que vous cliquez sur le bouton et si la variable d'affichage est vraie, nous voulons afficher l' exemple d'effet en trois composantes. Faisons-le rapidement ici. Nous allons donc avoir si l' affichage est vrai et n, nous allons afficher le troisième exemple d'effet de plus près avec la balise de fermeture douce. L'état initial de l' affichage est donc défini sur true. C'est pour cette raison que les trois composants de l'exemple d'effet seront affichés à l'écran. Et lorsque vous cliquez sur ce bouton, l'affichage est réglé sur faux. L'exemple de l'effet que trois composants seront montés depuis le dôme est aussi simple que cela. Laissons cela rapidement. Un conteneur de souris dans les surlignements de l'application. Postez un commentaire à leur sujet. Viens ici. Nous allons donc importer la plupart des conteneurs à partir de Component Slash, utilisant Practice Slash Mars Container. Et bien sûr, nous devons courir jusqu'ici. Enregistrer. Vérifions-le sur le navigateur. Tout fonctionne parfaitement en tant que spectateur. Très bien, inspectons la console. Maintenant, lorsque je déplace la souris, les coordonnées x et y sont mises à jour et l'instruction est imprimée sur la console. Et maintenant, lorsque je clique sur l'écran à bascule, ce composant sera monté depuis le dôme. Essayons-le. Tu peux voir ça ? Belle ? Maintenant, le problème est le suivant. Si j'essaie de déplacer la souris, l'instruction sera également imprimée sur la console. Jette un coup d'œil. Vous voyez, je veux que vous remarquiez ce type ici. Chaque fois que je déplace la souris, les instructions sont imprimées sur la console. Mais regardez, nous avons monté les composants, même si le composant a été supprimé, l'écouteur d'événements qui appartient au composant écoute et s'exécute toujours. Tu peux voir quand je déplace la souris , tu le vois ? Le problème est le suivant chaque fois que vous montez votre composant, assurez-vous toujours d'annuler tous les abonnements, les auditeurs et la demande de récupération que vous avez faite. Tout simplement parce que nous ne voulons pas exposer notre application à une fuite de mémoire. Ce que nous devons faire pour résoudre ce problème, c'est nettoyer la fonction. En nettoyant la fonction, nous allons imiter la valeur de la composante n. Nous le faisons en renvoyant une fonction, n'est-ce pas ? Nous en sommes au premier paramètre des effets américains. Faisons-le rapidement. Ouvrez donc l'effet Exemple 3. Laisse-moi te montrer, d'accord. Dans cette fonction, nous allons renvoyer une autre fonction appelée fonction de nettoyage. Et je vais supprimer les points de la fenêtre. L'écouteur d'événements doit se déplacer plus calmement avec la souris dans le journal. C'est aussi simple que cela. Nous allons maintenant regarder quelque chose sur la console pour indiquer que nous avons nettoyé notre fonction. Console.log Le composant Console.log est monté et le code est propre et sûr. Sortons-le sur le navigateur. Rechargeons, d'accord, déplaçons la souris. Vous voyez que nous obtenons les coordonnées x et y de la position de la souris. Et nous avons l'image de l'homme d'État imprimée sur la console. Maintenant, lorsque je clique sur l'affichage à bascule, les trois composants de l'exemple d'effet seront montés. Jette un coup d'œil. Déplaçons la souris pour vérifier si tout va bien. Vous voyez qu'il n' écoute plus l'événement. Le composant est maintenant monté sur la console. Le code est propre. Note technique sur ces points clés. Chaque fois que vous souhaitez monter votre composant, assurez-vous toujours d'annuler tous les abonnements, les auditeurs et la demande de récupération que vous avez faite. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Parcours plus rigide, animalier ici. 38. 37 Chercher plusieurs articles: Avec les solides connaissances acquises lors des cours précédents. Dans cette conférence, nous allons apprendre comment récupérer des données à partir d'une API. Pour implémenter cet exemple, nous allons donc utiliser l'API d'espace réservé JSON. L'espace réservé JSON est une API REST en ligne gratuite que vous pouvez utiliser chaque fois que vous avez besoin de fausses données. Et il est surtout utilisé pour enseigner la prose en binôme. Alors rendez-vous rapidement sur Jason placeholder.code.com. Faites défiler la page vers le bas jusqu'aux itinéraires. Ici. Nous avons un point de terminaison différent. Mais dans cette conférence, nous allons aborder les multiples points de terminaison de publication. Cliquez pour ouvrir. Tu peux voir ça ? Nous avons donc ici les données au format JSON, qui sont simplement un tableau d'objets avec des propriétés différentes en termes de paire clé-valeur. Donc, en utilisant le hook d'effets, nous voulons récupérer ces données et les afficher à l'écran à l' aide d'une bibliothèque externe appelée ox use. Vous pouvez également utiliser l'API Fetch. Mais dans cette conférence, nous allons nous concentrer sur la manière d'utiliser les actes. Utilisez rapidement VS Code. Bien, donc c'est exactement ici que commence le formulaire. Hein ? Nous sommes dans le répertoire des composants. Nous allons créer un nouveau package appelé récupération de données. Dans le cadre des données relatives au vieillissement, nous allons créer un nouveau composant appelé fetch. Les publications multiples génèrent le composant fonctionnel. Déclarer rapidement une variable d' état à utiliser. Mais avant de procéder, nous devons d'abord importer le crochet américain au plus haut niveau. Juste ici. Nous allons déclarer une variable d'état pour le post. Je vais faire des posts const, coma, set posts. Et l'état initial sera un tableau vide. Lorsque vous observerez la structuration du RAD, vous vous rendrez compte que l'élément est nommé avec une plèvre inquiète, vous savez pourquoi ? C'est simplement parce que nous récupérons plusieurs données. Ainsi, lorsque vous écrivez du code comme un pro, vous devez toujours vous concentrer sur les conventions de dénomination. Ont raison. J'ai trop parlé. Continuons. OK, donc la prochaine étape consiste à appeler l'effet cerceau. Et avant de poursuivre, nous devons également importer l'effet américain. Au plus haut niveau. Ici. Nous allons appeler cela la fonction d'utilisation de l'effet. Et la fonction d'effet prend en compte une fonction de flèche lorsqu'elle devient paramètre. Alors, c'est dans cette fonction d'erreur que nous allons créer le quiz Getter. Mais avant de continuer, nous devons également installer une bibliothèque externe appelée axial. Passez rapidement au terminal. Nous devons arrêter le serveur Control C en cours d'exécution pour assurer que vous vous trouvez dans le répertoire client. Et puis je vais installer le gestionnaire de packages node. L'installation est en cours. C'est fait, Access a été installé, avec succès. Et en haut, nous devons également importer des axiomes depuis le module d'accès. Le plus simple, c'est que dans la fonction d'effet, nous devons envoyer une requête get à l'URL. Et je vais faire des axiomes point par point. Et revenez ensuite au navigateur. Nous devons copier l'URL. Et lorsque nous atteindrons cette URL, l'intégralité de cet article sera récupérée. Ça a l'air bien. Magnifique. Faisons-le rapidement. Copiez-le puis collez-le ici. les plus simples qui ne l'ont pas fait, la requête get renverra une promesse. Nous devons donc enregistrer la réponse. Ici. Je vais faire point. Alors. Ici, nous allons prendre en compte la réponse. Juste en dessous, nous allons enregistrer les participants dans le journal de la console. S'il y a une erreur, nous devons la détecter et l' enregistrer également sur la console. Les points s'accrochent. Pour détecter l'erreur et l' enregistrer dans l'erreur de la console. Nous sommes donc juste en train de couper l'air ici. Donc, quelle que soit la flèche, nous allons accéder au journal de la console. L'erreur est la plus simple qui soit correcte. Une fois cela fait, la prochaine étape consiste à mettre à jour l'état initial avec la nouvelle côte. Donc, pour cela, nous devons appeler la fonction de configuration ici. Définissez les publications pour répondre aux données par points. Des gars sympas. Lorsque vous faites cela, tout apparaîtra comme prévu. Affichons-le rapidement à l'écran. Viens ici. Je vais utiliser les droits de balise UL contenus dans l'UL en ouvrant des accolades fermées pour intégrer des expressions JavaScript. Et je vais publier une carte à points. Permettez-moi de vous montrer ce post ici. Ce gars, nous voulons cartographier tout ce que nous avons ici et comment cela s' affiche à l'écran. Et vous savez que la méthode cartographique a une autre fonction. Et cette fonction prend en compte un paramètre. Ce paramètre représente au minimum chaque article. Ici, nous allons avoir le tag LI. Donc, dans le code HTML interne, nous pouvons créer le titre du post point. Laisse-moi te montrer rapidement. Vous pouvez voir que nous avons le titre ici, l'identifiant corporel et l'identifiant utilisateur. Donc, dans mon cas, je veux juste récupérer le titre. Vous pouvez décider de récupérer le corps et les autres. Maintenant, nous devons également spécifier la clé, key equa post dots ID, qui est cet identifiant ici. Comme c'est beau. Nous allons importer et récupérer plusieurs publications à partir de Component Slash Data Fetching, Sludge, Fetch Multiple Publications. Et ferme-le rapidement. Récupérez plusieurs publications, enregistrez-les, dirigez-vous vers le terminal. Nous devons démarrer le serveur. Et elles sont si belles. Maintenant, nous avons réussi à récupérer tous ces articles ici, qui est précisément l'outil PIE. Si vous souhaitez récupérer le corps, c'est extrêmement simple. Venez ici et il vous suffira de publier des points en toute sécurité sur le navigateur. Vous voyez maintenant que nous avons récupéré à la fois le titre et le corps. Vous pouvez donc le faire à la fin, mais je tiens à ce que les choses restent simples. Enregistrez dans le navigateur. Tout fonctionne parfaitement comme prévu. Mais lorsque vous observez la console, vous verrez la répétition continue des données relatives au vieillissement. Tu peux voir ? Mais nous voulons que les données ne soient récupérées que sur le composant monté. Pour cela, nous devons revenir au code et spécifier le tableau de dépendances. C'est vrai, dans la fonction d' effet. Juste ici. Laissez-moi vous montrer que c'est la fonction d'effet. Le deuxième paramètre sera donc un tableau vide. Lorsque vous enregistrez et revenez au navigateur. Rechargeons. Voyez-vous maintenant que la console est extrêmement propre et tout fonctionne parfaitement comme prévu. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentrés et prodiguez des soins holistiques. 39. 38 Bouton clic: Dans cette conférence, nous allons apprendre comment déclencher l'effet sur la clique électorale. Le but de cette conférence est donc de faire la requête GET dans le gestionnaire de clics. Pour continuer, nous avons besoin d' une variable d'état dont la valeur ne changera qu'en fonction de la clique de navigation. Et pour l'instant, la seule valeur qui change dans cette application est cet identifiant. Permettez-moi donc de vous montrer rapidement en tant que pilier de Zuma. Alors quand j'en fais un, tu peux le voir ? C'est donc de cela que je parle en ce moment. Nous voulons les faire sur Voting Clique. Nous ne voulons donc pas le mettre en œuvre de cette façon. Revenez rapidement au code VS et allons-y. Pour implémenter une telle fonctionnalité. Déclarons rapidement une nouvelle variable d'état dont la valeur changera lorsque vous cliquerez sur le bouton. Juste ici. Je vais faire exactement comme ça. Ensuite, j'appellerai ce bouton Click ID. Bien sûr, cela sera changé comme ça, c' est aussi simple que cela. Nous allons donc laisser l'état initial comme ceci. Mettons donc rapidement en œuvre la navigation de plaisance. Très bien, donc avant de continuer, nous devons formater le code pour le rendre propre, un peu beau. Maintenant, nous allons avoir le bouton ici. En cliquant sur ce bouton. Nous voulons invoquer une fonction et le nom de la fonction est géré. Cliquez sur le bouton, tapez navigation », puis la valeur sera id et rats. Mais pour le test interne, je vais faire un gros post. Très bien, nous sommes prêts à partir. Il ne reste plus qu'une chose, pour l'instant. Nous voulons donc définir l' ID de clic sur le bouton sur le nouvel identifiant dans le champ de saisie. Et comment s'y prendre ? Nous devons le faire, non ? Dans le cadre de cette fonction. Ici, la baignoire, nous allons avoir une fonction constante à cent clics, réglez-la sur notre fonction. Ensuite, nous devons appeler la fonction de configuration pour cliquer sur le bouton de réglage. Et maintenant, nous le mettons à jour avec l'identifiant actuel que l'utilisateur saisira, dans le champ de saisie comme celui-ci. C'est aussi simple que cela. Donc, avec cela, nous définissons l'ID de clic sur le bouton, l'ID qui sera capturé à partir du champ de saisie. La ligne suivante consiste donc à permettre à l'effet de dépendre de l'identifiant indiqué dans l'ID du clic inférieur et non de l'échange irrégulier. Laisse-moi te montrer rapidement. Pouvez-vous voir précédemment que notre effet dépend de cet identifiant qui sera capturé à partir du champ de saisie. Mais maintenant, nous voulons le régler sur l'ID de clic inférieur, qui est ce gars ici. Ici. Nous devons le remplacer par ID de clic sur le bouton. L'identifiant que nous avons saisi dans le champ de saisie est stocké juste à l'intérieur de ce gars ici. Vérifions-le sur le navigateur. Enregistrez dans le navigateur en tant que tel. Tu ne vas pas chercher. Magnifique. Faisons-en deux. Ici sur Fetch. Phrase parfaite. Tout fonctionne parfaitement comme prévu. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Toujours axé sur les soins holistiques. 40. Introduction à l'API Context: Bon retour à tous. Nous allons maintenant discuter d'un hook très intéressant et puissant appelé contexte américain. Mais avant de poursuivre, c'est une bonne chose. Nous comprenons ce qu'est l' API du concours et comment elle fonctionne. Ensuite, nous explorerons les crochets contextuels américains qui facilitent les choses. Qu'est-ce donc qu'une API de concours ? Considérons rapidement une application React qui comporte plusieurs composants. Maintenant, en haut se trouve le composant de l'application, c' est-à-dire, bien entendu, les composants racines de chaque application React imbriqués dans les composants de l'application sont plusieurs autres composants indépendants, un composant isolé à différents niveaux d'arborescence. Et nous avons les composants a, b et c qui constituent le premier niveau. Composant. X est imbriqué dans le composant B. Pourquoi le composant est-il imbriqué dans la compétence ? Et le composant z est imbriqué dans le composant y. Maintenant, le défi consiste à afficher le prix total d'un article dans les composants a, x et z. Et le prix de l'article sera conservé en tant que propriété dans le composant de l'application. Donc, pour pouvoir afficher le prix et les composants imbriqués, nous devons leur transmettre le prix sous forme de sondes. Très bien, donc pour que le composant a reçoive ce prix, nous devons le transmettre directement en tant qu'accessoires. Et c'est très simple et direct. Pour que le composant X bénéficie de ce prix, nous devons le répercuter via le composant intermédiaire B jusqu'à l'entreprise et aux œufs. Pour que le composant z reçoive le concours de prix, nous devons le transmettre à la compétence intermédiaire et à Y. D'accord ? Ainsi, lorsque vous observez attentivement l'arbre des composants, vous vous rendrez compte que les composants b, c et y n'ont pas besoin de sondes. Mais nous devons encore faire passer les sondes à travers le composant afin d'accéder au composant requis où les données seront consommées. Ainsi, dans ce scénario, les composants B, C et Y sont appelés porteurs de sondes qui n' utilisent pas les instructions, mais qui doivent transporter les sondes vers les composants concernés requis. Ainsi, le processus consistant à faire passer des accessoires à travers le composant imbriqué est appelé forage par sonde. Alors maintenant, je veux que vous fermiez les yeux et imaginiez que nous avons plus de 25 composants imbriqués ici. Cela signifie alors que tous ces composants intermédiaires devront être acheminés vers le composant concerné. Et bien sûr, nous allons brouiller notre code. Et cela devient un problème pour certains types d' invites requis par de nombreux composants de notre application. Comme les préférences linguistiques. L'authentification utilise le thème de l'interface utilisateur. OK, je voulais donc être sympa si nous pouvions envoyer directement des données au composant concerné sans avoir à sonder, percer les composants imbriqués. OK, voici donc où se trouvent les colonnes de l'API du concours. Les concours permettent de transmettre des données dans l'arborescence des composants sans avoir à effectuer de recherches manuelles tout au long du semestre. Des entreprises. En d'autres termes, React Contest nous permet de partager plus facilement des données entre nos composants. Cela permet d'éviter les sondes, les forages. Oui, c'est tout pour le moment. Dans cette conférence, nous allons voir comment l'API contextuelle était utilisée avant l'introduction de who soigneurs that. Nous avons de nombreux mensonges pratiques Le contexte américain montre à quel point cela apporte de la flexibilité. Très bien, utilisons-le pratiquement lors de la prochaine conférence. À bientôt. 41. 39 Contexte: Dans cette conférence, nous allons avoir une compréhension pratique du contexte, de l'API et de son fonctionnement. Nous allons donc mettre en place un concours de prix qui permettra à des composants de trois niveaux différents de lire une sonde réussie au plus haut niveau. Et bien, dans cet exemple, nous allons utiliser la composante z pour afficher le prix des articles sans avoir à effectuer de recherches, approfondir la compétence intermédiaire et à expliquer pourquoi. D'ailleurs, j'ai créé une application React appelée practice contests. donc rapidement la conférence en pause à la fin , puis générez une nouvelle application React. Bien, une fois cela fait, créons rapidement le répertoire des composants. C'est vrai, au sein de la SRC. Cliquez avec le bouton droit sur de nouveaux composants alimentaires. Et le répertoire des composants. Nous allons créer la compétence y et composante z z point js. Enfin, nous allons avoir un y point j compétent, c'est magnifique. Je dois donc juste apporter le z au STM ici, commande V pour fermer l'Explorateur. Ensuite, générons les composants fonctionnels, n'est-ce pas ? Nous sommes dans les fleurs. Maintenant, nous allons nous concentrer sur le bord droit de l'arbre. D'accord ? Ainsi, lorsque vous observez le bord droit de l'arbre, vous vous rendez compte que le composant z est imbriqué dans le composant y. composant y est imbriqué dans la compétence. Enfin, les compétences sont imbriquées dès le composant de l'application. Nous allons donc suivre rapidement ce modèle et le transformer en code. Donc, suivant le modèle de l'arbre, composant z est imbriqué dans y. Alors voici pourquoi ? Nous allons importer le composant z, le composant z. Et ensuite, nous allons le rendre ici. Pourquoi le composant est-il imbriqué dans le composant C ? Revenez à la compétence, importez le composant y. Ensuite, nous devons afficher le composant y. Enfin, la compétence est ensuite rendue dans le composant de l'application. Accédez au composant App. Importez une compétence à partir d'une compétence compétente en matière de coupe et de cheveux roux. Nous devons rendre la compétence aussi simple que cela. Hein ? C'est donc à Lee que le plaisir commence. Pour mettre en place des concours. Nous devons suivre quatre étapes. La première étape consiste à créer le concours en utilisant méthyle du concours décrété tout en haut. Et je vous en prie, ne le faites pas ici. Ne le faites pas dans le composant. Il faut que ce soit dehors. Magnifique. Et maintenant, nous allons créer un concours de prix. Coût. Concours de prix, égalité, réaction, points, création de concours. Une fois cela fait, la deuxième étape consiste à intégrer concours que vous avez créé et à intégrer le fournisseur de contenu à votre arborescence de composants. Donc, ici, je dois juste mettre en avant ce gars pour le moment , puis y mettre fin. Et ici, nous allons créer un fournisseur de points pour les concours de prix. Parfait. Ensuite, nous devons coller le composant entre les deux. C'est aussi simple que cela. Hein ? Passons à la troisième étape. présent, nous allons attribuer la valeur requise votre fournisseur à l'aide de l'argument de valeur. Ce que je vais faire ici, c'est lui apporter des accessoires, qui ont la même valeur. Maintenant, nous devons spécifier un prix, et je vais faire 200$. Enfin, la quatrième étape consiste à consommer la valeur de n'importe quel composant en utilisant le consommateur du concours. Avant de poursuivre, nous devons donc exporter le contexte. Viens ici. Nous allons le faire ici même. Nous pourrons l'importer dans un autre module. présent, le défi consiste à utiliser cette valeur dans le composant z sans avoir à sonder, à analyser les compétences et à y. Allons-y rapidement. Entrez en entreprise et z. En haut de la page, nous allons importer concours de prix depuis le composant de l'application. Essuyez-le aussi rapidement. Nous allons donc avoir un concours de prix Dot Consumer. Et nous allons avoir un prix. Donc, ici, nous allons renvoyer un div, n'est-ce pas ? Dans le cadre de la définition. Nous devons afficher le prix en toute sécurité. Assurez-vous d'exécuter votre application, puis de vider le navigateur. C'est ici. Tu peux voir ça ? Belle ? Laisse-moi zoomer un peu plus haut, non ? Nous sommes donc maintenant en mesure de consommer le prix maintenu dans le composant de l'application, n'est-ce pas ? Dans le composant z, même sans avoir à percer les composants intermédiaires, mes amis. Le concours est en effet puissant et faible. D'accord, la ligne suivante consiste donc à prendre en compte un autre contexte, car dans votre application, il y a de fortes chances que vous ayez plusieurs valeurs à utiliser dans un composant différent. Voyons donc comment implémenter plusieurs contenus. Dirigez-vous vers le composant de l'application. Supposons également que nous souhaitions afficher le nom de l'élément. D'accord, nous avons d'abord affiché le prix de l'article, et maintenant nous devons afficher le nom de l'article. Créons donc rapidement un nouveau concours. Exportez des const, et je vais l' appeler concours d'objets, equa, React Dot, créer du contenu, les faire exporter et modifier. Nous pourrons l'utiliser dans différents fichiers. Si vite. Ici, il sera imbriqué dans fournisseur de points du concours d' objets. Bonjour, laissez la balise de fermeture commander X pour la couper, puis collez-la ici. Formatons rapidement le code pour obtenir une indentation appropriée. Magnifique. Vous pouvez formater le code avec prettier. Bien sûr, vous devriez déjà savoir comment procéder. Bien, une fois cela fait, nous devons donner une valeur au concours. Le concours d'objets aura un avantage , supposons que Samsung. fois cela fait, nous devons consulter ce concours organisé dans l'entreprise en z. Donc, ici, nous devons également importer l'objet du concours. Cela fait, venez ici, surligne la commande X à couper. Ensuite, nous allons renvoyer le contenu de l'article au consommateur, ouvrir et fermer les crochets. Ensuite, nous allons avoir la réception ici. Hein ? Dans cette fonction, nous allons renvoyer la commande div V pour coller le div. Et ici, nous devons également exposer l'article. Ensuite, il suffit de faire un objet comme celui-ci. Rendons-le donc plus lisible. Ici, je vais faire des concours de presse, et ici je vais faire un concours d'articles. Très bien, alors formatons rapidement le code avec prettier. Parfait, économisez. Sortons-le sur le navigateur. Vous voyez que le prix du concours est de 200$. L'article appartient à Samsung Friends. C'est vraiment génial et j'adore ça. Nous sommes donc maintenant en mesure d'obtenir plusieurs valeurs de concours. Mais une chose que je tiens à dire, c'est que cette approche est assez complexe. Donc, pour réduire la complexité Revlon Mickey's du contexte américain accroche. Ensuite, vous allez voir comment nous pouvons organiser plusieurs concours en quelques lignes de code. C'est tout pour le moment. Dans la prochaine conférence, nous allons pratiquer le concours d'utilisation. Qui vous verra lors de la prochaine conférence ? Concentrez-vous sur les soins holistiques. 42. 40 useContext pour contexte multiple: Dans la conférence précédente, nous avons appris à gérer plusieurs concours avec le modèle Render Props. Et dans cette conférence, nous allons utiliser le même concours multiple en utilisant le concours Use. Qui semble le moins pratique ? Est-ce rapide ? Très bien, il n'est donc pas nécessaire de créer un nouveau composant. Nous allons donc utiliser le composant y pour consommer la valeur du concours, n'est-ce pas, dans cette conférence. Composant y, une chose que vous devez garder à l'esprit est que les étapes de mise en œuvre du concours restent exactement les mêmes. La seule chose qui va changer c'est le mode de consommation. est donc très facile d'utiliser des contextes pour consommer la valeur du contenu en quelques lignes de code. Pour poursuivre avec le crochet contextuel américain. abord, nous devons l' importer à un endroit, une virgule ici, puis utiliser contest. La prochaine étape consiste à importer le concours nécessaire à utiliser. Concours de prix des importations depuis notre composant d'application. Ensuite, nous devons également importer l'objet du concours. Ils proviennent tous deux du composant de l'application. Cela fait, la ligne suivante consiste à invoquer le crochet du concours américain. Très bien, le contexte américain est donc une fonction. Nous devons donc l'invoquer, non ? le cadre de la fonction contextuelle américaine, nous allons intégrer le prix et le concours d'objets en tant que paramètres. Nous utilisons donc le concours, puis nous allons ajouter le concours de prix, les points forts, les doublons. Et ici, nous allons participer au concours d'objets. Le contexte américain renverra la valeur du concours. Assignons-le donc à une variable constante. Hé, je vais le faire, je vais appeler le prix variable. Et ici, nous allons appeler l'élément variable. Juste comme ça. C'est aussi simple que cela. Essuyons ça. Enfin, nous devons consommer le contenu et les amis. Jette un coup d'œil. Il est extrêmement facile de participer au concours. Il suffit de référencer ces variables. Laisse-moi te montrer rapidement. Ici. Je vais faire le prix et je vais faire ici l'article, économiser sur le navigateur. Et ce sont ceux-là. Tu peux voir ça ? Belle ? Nous ne pouvons pas utiliser plusieurs concours en une seule ligne. C'est fantastique et j'adore tout cela, pour être honnête avec vous, l'introduction de qui peut réagir, rendre les choses très faciles. Beaucoup comparent la mise en œuvre précédente. Vous apprécierez certainement l'introduction des hooks dans React. Et maintenant, la question est quand devons-nous utiliser le concours React ? Le concours React est idéal lorsque vous transmettez des données qui peuvent être utilisées dans différents composants de votre application. Et ces types de données incluent des données d' équipe telles que l'obscurité ou la lumière, l'humeur. Utilisez nos données, qui correspondent à l'utilisateur actuellement authentifié. Enfin, les données spécifiques à la localisation, telles que celles dans lesquelles nous utilisons notre langue, se trouvent. Une autre question qui me vient à l'esprit est quel est exactement le problème qui réagit, conteste, résout ? Concours React. Aidez-nous à éviter le problème du perçage des hélices. C'est éteint maintenant et à la prochaine conférence. Steph, analyste des coûts, prends soin de toi. 43. 41 crochets de réducteur: Dans la conférence précédente, nous avons eu une introduction détaillée sur l'utilisation des crochets réducteurs. Dans cette conférence, nous allons donc poursuivre avec l'exemple pratique. Nous allons démontrer cet exemple en implémentant une simple contre-application. Nous ne serions donc pas en mesure d' incrémenter la contre-valeur, décrémenter et même de la remettre à zéro. Bien que l'application puisse sembler simple. Mais encore une fois, c' est Exhibe le schéma que vous verrez dans votre codage quotidien. Rapidement dans le répertoire du composant. Créons un nouveau package appelé use reduce our practice. Dans cette poche. Créons un nouveau composant appelé mon compteur. Générez le composant fonctionnel directement dans les GSA. Procédez à la création de trois protéines différentes. Juste à l'intérieur de la division. Nous allons avoir un verrou par paliers. Et je vais le dupliquer deux fois. Ça va être des diminutions et ça va être une réinitialisation du vote. La ligne occidentale consiste donc à créer le compteur qui sera affiché dans les GSA. Donc, pour cela, nous avons besoin d'utiliser des arêtes ou un crochet. Pour implémenter, utilisez des arêtes ou un crochet. Tout d'abord, nous devons l'importer au plus haut niveau. Donc, ici, je vais utiliser un réducteur. Je n'ai pas fait ça. Tout comme les autres crochets que nous avons étudiés dans la conférence précédente. L'utilisateur, qui est notre crochet, est également une fonction. Nous devons l'invoquer. Donc, les droits au sein du composant, nous allons invoquer l'utilisation, sont notre hameçon. Faisons rapidement réapparaître les mêmes balises. Nous avons déjà appris que le système américain Ridges or Hook accepte deux arguments. Le premier argument est une méthode de réduction et le second argument est l'état initial. Donc, dans le paramètre, nous allons avoir la virgule de la méthode du réducteur , puis l'état initial. Une fois cela fait, la prochaine étape consiste à déclarer l'état initial et définir la fonction de réduction. Sortez donc du composant. Tout en haut. Nous allons avoir un état initial constant égal à zéro. Définissons rapidement la fonction du réducteur. Réducteur de coûts, réglez-le sur notre fonction. La fonction de réduction accepte donc deux paramètres. premier est l'état actuel et le second paramètre est l'action. état actuel va donc calmer l' action. Ils réduisent donc notre fonction renvoie également une valeur, qui est le nouvel état. Ici pour les articles pédagogiques. Je vais y retourner. Un nouvel État comme celui-ci. Ne t'inquiète pas. Nous allons voir comment cela se passera à l'avenir. Pour que la transition ait lieu, nous devons déclencher le deuxième paramètre de la fonction de réduction, qui est l'action. Vous pouvez donc considérer l'action comme une instruction donnée à la fonction de réduction. Et en fonction de la spécification de l'action, le réducteur effectuera la transition d'état nécessaire. Donc, pour cet exemple, nous allons avoir trois actions différentes. L'incrémentation, la décrémentation et l'action de réinitialisation. Alors effaçons ça rapidement. Dans le cas de Reducer, la pratique courante pour implémenter du code en fonction son action consiste à utiliser le boîtier du commutateur. Donc, ici, nous allons faire un switch. L'expression du commutateur sera une action répondant aux exigences de notre application. En fait, ce sera l'incrémentation, la décrémentation de n, l'action de réinitialisation. Nous allons donc avoir ici le premier cas de colonne d'incrémentation. Et nous allons renvoyer l'état actuel plus un point, le point le plus simple. Et ici, je dois juste les dupliquer, dupliquées deux fois. Et là, nous allons avoir la décrémentation. La nouvelle étape va en soustraire un à l'état initial. Ici, nous allons avoir case rosette, qui consiste à réinitialiser l' état à la valeur zéro. Et c'est l'état initial. Cela va donc retourner à l'état initial. Enfin, nous devons spécifier le cas par défaut. Dans ce cas, nous allons rendre l'État lui-même. C'est aussi simple que cela. Maintenant, la prochaine étape consiste à envoyer l'action. À l'instar des États-Unis que hooks utilisent, Reduce nous renvoie une paire de valeurs que nous pouvons récupérer l'aide de la structure et de la syntaxe 3D. Ici, je vais faire de la const directement dedans. Et ici, nous allons avoir la méthode d'expédition. Ensuite, attribuez-le comme ceci. Le réducteur d'utilisation renvoie l'état actuel, que nous appelons ici count, ainsi que la méthode d'expédition. Et la méthode de répartition est utilisée pour exécuter un code correspondant à une action particulière. Le décompte ici est donc une variable qui est utilisée pour stocker l' état initial si rapidement, n'est-ce pas ? Dans les GSA, nous utiliserons l'étiquette head one pour afficher le décompte. Maintenant, nous allons faire en sorte qu'il ait gagné, juste à l'intérieur. Nous devons afficher le décompte, c'est-à-dire ce gars ici qui est utilisé pour conserver l'état initial et l' état qui sera mis à jour. C'est juste utilisé pour maintenir l'État, d'accord ? Et ce type est habitué à envoyer le code en fonction de son action. Vous allez le voir dans un thème G. Donc, en ce qui concerne la balle, nous devons spécifier leur propre clique. Dans le OnClick. Nous allons intégrer une fonction d' erreur qui sera utilisée pour invoquer la méthode d'expédition. Et la méthode de répartition va être utilisée pour exécuter un code en fonction de son action. Nous avons des incréments d'action. C'est aussi simple que cela. Alors maintenant je vais les copier. Sidway. Je l'ai copié directement des crochets qui s'ouvrent vers le bouton Copier en cliquant sur le bouton. Viens ici et colle. Nous devons donc simplement les modifier pour les décrémenter, car nous voulons envoyer l'action de décrémentation. Alors venez ici comme ça et collez-le également. Dans ce cas, nous souhaitons envoyer l'action de réinitialisation. Lorsque nous envoyons l'action d' incrémentation, elle en ajoute une à la valeur actuelle initiale. Lorsque nous envoyons l'action de décrémentation, elle en soustrait une à la valeur initiale de la boîte. Enfin, lorsque nous lançons l'action de réinitialisation, le compte est remis à zéro, qui est l'état initial. Nous allons le rendre rapidement dans le composant de l'application. Arrivez au sommet et ensuite nous devons importer. Je peux en distinguer un grâce à la réduction de l'utilisation des composants, réduction de notre pratique, à la réduction de mon compteur. Je vais faire défiler la page vers le bas. Il suffit de randomiser le compteur 1. Fermez-le à l'aide de l'étiquette à fermeture automatique. Enregistrez et assurez-vous d'exécuter l'application sur le terminal. Laisse-moi te montrer. Pouvez-vous voir que mon application est actuellement en cours d'exécution sur le navigateur. L'idée est la suivante : tu peux le voir ? Essayons-le en cliquant sur le tableau Haines, je clique sur l' incrément, Botkin. Il augmente. Celui sur lequel je clique est décrémenté à zéro. Et encore une fois, j'ai appuyé sur l' incrément, l'incrément, l'incrément. Et puis laisse-moi essayer de réinitialiser cette fois. Magnifique. Tout fonctionne parfaitement comme prévu. Donc, pour récapituler, revenez au code VS et laissez-moi vous montrer rapidement comment utiliser le réducteur américain. Tout d'abord, vous devez l' importer en haut. Et puis le réducteur est une fonction. Par conséquent, vous devez également l'invoquer. Cette fonction prend en compte deux paramètres. première est la méthode du réducteur et la seconde est l'état initial. De plus, l'utilisation de crêtes ou de crochets renvoie un tableau de deux valeurs, qui dans ce cas correspondent à l'état initial et à une méthode d'expédition. La méthode de répartition est utilisée pour distribuer l'action et le nombre de variables ici est utilisé pour stocker la valeur de cette table. Donc, lorsque vous vous retrouvez en haut de la page où se trouve la fonction de réduction, ce type, qui est le premier paramètre aux États-Unis, crêtes ou des crochets, la fonction de réduction prend en compte deux paramètres. Il y a d'abord l'état, puis l'action. Ainsi, dans le cas d'un réducteur, la convention pour implémenter le code en fonction son action est d' utiliser les touches sucrées. C'est pourquoi nous avons la suite de nos cheveux. Et c'est ici, dans le switch, que nous avons mis en œuvre les actions. OK, nous avons donc des incréments. Cela renverra un nouvel état qui en ajoutera un à l'état initial. Et bien sûr, vous devez savoir que l'état initial est également le deuxième paramètre. Droits. Ne voudriez-vous pas réduire notre fonction ? C'est ici. OK, donc lorsque l' action est incrémentée, elle en ajoute une à l'état initial. Et lorsque l'action est décrémentée, nous en soustrayons également une à l'état initial. Ensuite, lorsque l' action est réinitialisée, réinitialisez la valeur à zéro. Et nous avons ici l' état par défaut de l'application. Il écrit, n'est-ce pas celui de Jesse ? Nous avons mis en place une méthode d'envoi en un clic pour appeler. Donc, c'est vrai, dans la méthode d'expédition, nous avons spécifié l'action. C'est souvent le cas maintenant et dans la prochaine conférence, nous prendrons un exemple plus complexe. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur l'approche holistique. 44. 42 useReducer État et objet d'action: Le deuxième exemple de réducteur d'utilisation sera examiné dans cette conférence. Et dans cette conférence, nous utiliserons l'objet d'état et les objets d'action plutôt que l' état et l'action simples que nous avons implémentés dans la conférence précédente. Si rapidement, nous n'avons pas réduit notre pratique, créé un nouveau composant appelé my counter pour ouvrir rapidement mon conteneur. Le voici surligné, copiez tout le code conservé sur mon appareil photo, puis collez-le. Apportons rapidement les corrections nécessaires. Ici. Nous devons juste modifier mon contenu, voulons prendre contact avec vous lorsque vous enregistrez de belles photos. La prochaine étape consiste à transformer la variable d'état actuelle en objet. Faites défiler l'écran vers le haut. Donc, ce que je vais faire maintenant, c'est effacer tout ça. Maintenant, nous devons le définir comme un objet, n'est-ce pas ? À l'intérieur de l'objet. Je vais jouer Cantor. Réglez-le à zéro, comme si ces droits apparaissaient dans l'interface utilisateur. Nous allons maintenant compter les points, le compteur a. Les dénombrements représentent les objets non testés. La prochaine étape consiste à convertir notre simple action de chaîne en objet. Et le voici. Juste dans la méthode d'expédition, je vais simplement surligner puis couper la chaîne. Maintenant, nous devons le convertir en objet. Dans cet objet, nous allons intégrer une propriété appelée type et le type d'action est celui des incréments. Ici aussi, nous devons le transformer en objet, surligner et couper la chaîne, transformer en objet, et en prenant le type, le type d'action est décrémenté. Même chose ici. Le plus simple qui soit. Et avec cela, nous allons envoyer une action en fonction du type d'action. Alors, à droite, dans la fonction de réduction, faites défiler l'écran vers le haut. L'expression du commutateur sera action point py. Donc, pour l'action d'incrémentation et de décrémentation, nous allons renvoyer le nouvel objet d'état, surligner et l'effacer. Spécifions un objet. Quand l'objet que nous allons faire, c'est contrer l'air, alors les points contre un plus un. C'est le plus simple, c'est pareil ici. Spécifiez que l'objet contient un point d'état en contact avec un moins un. J'espace un peu. L'état et l'action du composant sont désormais transformés en objet. Et c'est tout. Rendered complète l'application Js. Et voyons ce que nous avons sur le navigateur. Importations à partir de composants Slash Use Réduisez notre pratique à la barre oblique des mitochondries, soulignons cela et ajoutons un commentaire à ce sujet. Ensuite, nous allons y répondre. G est plus près avec l'étiquette à fermeture automatique. Enregistrez l'application et assurez-vous qu'elle s'exécute directement dans le terminal. Et le navigateur. Sortons-le. L'incrémentation réinitialise comme nous le ferions à nouveau : incrémentation, décrémentation et réception. Tout fonctionne parfaitement comme prévu. Magnifique. Maintenant, la question est pourquoi préférer cette approche par rapport à l'approche précédente. Très bien, nous allons donc montrer un exemple qui donnera une réponse valide à cette question. Donc, avec cela, vous comprendrez assez bien. Supposons donc que nous souhaitions expédier des produits de valeur et des centres de villégiature différents. Supposons que nous ayons deux corps supplémentaires pour incrémenter et décrémenter le compte de cinq. Cela serait possible et très facile si l'action est un objet. Et lorsque vous extrayez l'objet d'action, vous vous rendrez compte qu'il ne possède qu'une seule propriété , à savoir vous vous rendrez compte qu'il ne possède qu'une seule propriété , le type d'action. Nous allons donc ajouter une autre propriété à l'objet d'action. Et cette propriété s' appellerait valeur, qui représentera le nombre qui sera utilisé pour incrémenter ou décrémenter la valeur du compte. Donc, pour signaler les choses que nous avons créées plus tôt, nous allons ajouter une propriété supplémentaire à manger, venir ici, une virgule, puis une valeur. Nous devons le régler sur un simplement parce que nous voulons que ce bouton incrémente la valeur d'état initiale d' une virgule ici. Dans la propriété value et définissez-la sur un. Cela va donc décrémenter l'état initial d'une unité. Et maintenant, dans cet exemple, nous voulons extrapoler ce qui sera utilisé pour incrémenter et décrémenter la valeur du décompte de cinq. La formule de copie est 25, 26. Dupliquez-le. Et ici, je vais procéder à la cinquième incrémentation. Ici, je vais procéder à l' incrémentation de cinq, n'est-ce pas ? Donc, ici, je vais en faire cinq, la valeur cinq. Cela fait, nous devons également revenir à la fonction de réduction. Et puis nous n'avons pas besoin de le coder en dur comme ça. Ce que je vais faire maintenant, c'est Plus Auction Value. Et cette valeur, c'est ça. Voici la valeur du point de vente aux enchères. Donc cette valeur représente chacun de ces gars ici, tous ces gars ici. Épargnons rapidement de l'obligation consulter les résultats sur le navigateur. Essayons-le. Toucher sur le plateau signifie augmenter d' une belle décrémentation d' un incrément parfait de cinq. Vous voyez cette diminution de cinq ? Tout fonctionne parfaitement comme prévu. Je vais appuyer sur le bouton de réinitialisation. Jette un coup d'œil. Magnifique. Ainsi, en utilisant l'action en tant qu'objet, nous pouvons utiliser plusieurs données dans la fonction de réduction. C'est donc l'une des réponses à la question que nous avons soulevée plus tôt dans cette conférence. Maintenant, montrons le deuxième exemple pour donner une réponse plus valide à la question qui a été soulevée plus tôt. Et dans cet exemple, nous allons nous concentrer sur la scène en tant qu'objet. Supposons donc que vous souhaitiez implémenter plusieurs compteurs. La meilleure façon de procéder est de faire défiler l'écran vers le haut lorsque l'état est un objet. Nous allons donc avoir une nouvelle contre-attaque maintenant. Et cela s'appellera compteur B. Je vais le régler sur 15. Pour mettre à jour la valeur du compteur B. Nous devons créer deux boîtiers de commutation supplémentaires. Viens ici. Ce que je vais faire maintenant, étant donné que nous l'avons créé plus tôt, je vais simplement mettre en évidence les lignes 11 à 13 dupliquées. Regardez-moi pendant que je vais sélectionner le compteur a. Ensuite, nous devons mettre en évidence toutes les occurrences du contact a dans l'action qui le dupliquera. Prenez votre cause ou prenez le bon bord , puis essuyez-la ici. Je vais faire une contre-attaque aussi simple que cela. Et maintenant, nous avons deux propriétés différentes en tant qu'objets divisés. Pour obtenir les résultats escomptés, nous devons faire correspondre la propriété de l'État. Laissez-moi vous montrer comment procéder. Point, points, états, appuyez sur une virgule. Je vais juste le copier et le coller comme ça, comme ça. Enfin, nous devons implémenter le canotage pour envoyer l'action en un clic. Lorsque je fais défiler la page vers le bas, je vais simplement copier l'incrément cinq. Viens ici. Faisons un div imbriqué dans ce div. Et puis je vais appeler ces incréments contact : surligner, copier, venir ici et coller. Ce sera donc le compteur de décrémentation B. Nous devons afficher le compteur be. Ici. Je vais utiliser la balise H2 pour afficher nombre de points B à B. Donc, pour l'instant, je dois juste spécifier qu'il s'agit d'un. C'est le compteur B. Et vous économisez sur le navigateur. Magnifique. L' état initial de a est donc nul. Laissez-moi vous montrer l'écriture de cet objet de date. C'est ici ? Pour Kappa B, c'est 15. Ainsi, lorsque nous cliquons sur ce bouton, nous devrions être en mesure de gérer les états du forum. C'est donc la beauté de l'utilisation des États comme objet. Essayons-le maintenant. Pouvez-vous voir fonctionner parfaitement comme prévu ? J'appuie sur Reset et essayons-le pour COUNTA be. Le compteur B ne fonctionne pas. Tu sais pourquoi ? Laisse-moi te montrer rapidement. Viens ici. Juste à l'intérieur du compteur b, nous envoyons l'action d'incrémentation. Et cette action est destinée au compteur a. Pour que le compteur B fonctionne, vous devez spécifier l'action pour le compteur B , puis envoyer cette option. Laissez-moi vous montrer ici. C'est pour le compteur a et voici le compteur a. Maintenant, je vais procéder à l'incrémentation B. Je vais faire la décrémentation B. Quand nous arriverons ici, annulez l'incrémentation, décrémentez B, enregistrez et consultez le tout dans le navigateur. Rechargez. Faisons l'essai et la contre-diffusion. Pouvez-vous voir les réinitialisations ? Essayez-le sur le compteur B. Vous pouvez regarder. Tout fonctionne parfaitement comme prévu. Très bien, donc en résumé, utilisant l'action comme objet, vous pouvez transmettre des données supplémentaires à la fonction de réduction. Et en utilisant l'état comme objet, nous sommes en mesure de gérer et de suivre plusieurs variables d' état. Et dans ce cas, voici les variables d'état a et B. Et nous pouvons le faire simplement parce que l'état est un objet, qui est ce type que vous voyez ici. Laisse-moi te montrer rapidement. Je dois juste arrêter ça. Et puis voici l'objet. Tout simplement parce que l' État est un objet, nous sommes en mesure de maintenir ces gars-là ici. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 45. 43 réducteur à usage multiple: Dans l'exemple précédent, nous avons pu suivre deux contextes différents en utilisant l'état comme objet. Et pour mettre à jour le contenu, nous devons créer des valises supplémentaires selon la méthode du réducteur. Mais si nous devons arriver jusqu'à nous avec la même transition étatique, il existe une approche plus simple pour y parvenir. Créez donc rapidement un nouveau composant appelé mon compte ou trois. Hein ? Nous allons utiliser la pratique des réducteurs. Ouvre mon bras de suspension. Surlignons et copions tout le code , puis collez-le ici. Nous n'avons qu'à changer le nom de l'entreprise en mon troisième contact, enregistrer, ouvrir le composant de l'application et le faire afficher. Soulignez ceci, placez-le, commentez-le. Et puis venez au sommet. Nous devons importer mon contact trois à partir de composants, réduire l'utilisation de la barre oblique sur mon compte ou trois. Faisons le rendu ici. Sûr. Sur le navigateur. Boom, l'application est bonne. Nous avons maintenant une simple contre-application. Partez de front pour arriver au compteur trois. La prochaine étape consiste donc à ajouter un autre contact d'État avec exactement la même transaction, c' est-à-dire incrémenter, décrémenter notre fonctionnalité de réinitialisation. Si tel est le cas, nous allons créer un réducteur d'utilisation supplémentaire. Donc, ici, nous allons avoir une constante. Je vais appeler ce type, en utilisant une virgule. Je vais appeler ce gars envoyé à. Ensuite, nous invoquons le réducteur d'utilisation. Et bien sûr, ils utilisent la méthode de réduction nos textes dans la méthode du réducteur comme premier argument, puis l' état initial comme deuxième argument. Donc, juste au sein de la division, nous devons envoyer ce gars. Alors faisons-le rapidement. Points saillants des lignes 23 à 26. Copie. Viens ici. Nous allons créer un autre div , puis le coller dans ce div. Donc ça va être expédié comme ça, comme ça. Et ici, nous avons deux dossiers qui montrent que c'est ce type qui a l'habitude de détenir l'État. OK, rendons les choses un peu lisibles. Je vais faire exactement comme ça. Lorsque vous enregistrez et que vous accédez au navigateur. Vous voyez que nous avons le premier contact , puis le deuxième compteur. Essayons-le. Incrémenter, décrémenter, réinitialiser, incrémenter, décrémenter la rosette. Pouvez-vous voir que tout fonctionne parfaitement comme prévu. Très bien, donc lorsque vous travaillez avec une variable d'état différente ayant exactement la même transaction de point, je vous suggère vivement d'utiliser l'approche à réducteurs multiples. Et cela permettra d'éviter la complexité de la gestion de l'État s'il devait s'agir d'un objet. Et aussi pour nous empêcher de dupliquer du code dans la fonction de réduction. Je comprends que cette conférence soit assez délicate, mais je vous suggère vivement de visionner la vidéo encore et encore pour vous en souvenir. C'est tout pour le moment. Et dans la prochaine conférence, nous allons apprendre à gérer l'État mondial. Si vous utilisez le presse-agrumes et utilisez Contest. Assistez à votre conférence d'interniste. Restez concentré et prenez soin de vous. 46. 44 useState et useReducer: Au niveau des composants, en particulier, vous avez vu un exemple de gestion de l'État local avec réducteur d'utilisation. Cependant, il peut arriver un moment où vous souhaitez communiquer l' état entre les composants. Par conséquent, vous souhaiterez peut-être opérer sur la scène mondiale. Et maintenant, la question qui se pose est savoir comment aborder cette question. En combinant le réducteur d'utilisation et les concours d'utilisation, vous ne serez pas en mesure de gérer l'état global. Dans cette conférence, nous allons donc apprendre à utiliser, à utiliser des concours et à utiliser Reducer pour gérer et distribuer la scène mondiale. Ce sera un très bon combo. Ont raison. Maintenant, considérons une simple contre-application avec six composants différents : entreprise, ABC et XYZ. Ainsi, l'état du compteur sera maintenu dans l'application Js. La mission ici est de partager le contre-état entre les composants x et z. Nous allons également partager la méthode, mettre à jour l'état, parcourir l'arborescence des composants sans avoir à sonder , explorer les composants intermédiaires. Et la solution à ce problème est d' utiliser l'API du concours. Donc, puisque nous travaillons avec des crochets, nous allons utiliser le hook use contest pour fournir la valeur nécessaire à la gestion du contraste entre les composants a, x et z. Commençons. Juste ici. J'ai nettoyé le composant de l'application. C'est très simple et je pense que vous pouvez le faire de votre côté. Il vous suffit donc d'effacer tous les composants que nous avons importés, puis de supprimer tous les rendus. Je vais expliquer cet exemple de manière à que vous le compreniez suffisamment bien. Maintenant, commençons. Dans le répertoire du composant. Nous allons créer un nouveau package appelé use contests with reducer. Hein ? Dans ce package, nous allons créer les composants a, x et z. Générez rapidement le composant fonctionnel dans d'autres fichiers. Je n'ai pas fait ça. La prochaine étape consiste à créer un compteur simple dans le composant de l'application, le composant l'application et le poids. Nous l'avons déjà fait. Donc, tout ce que nous allons faire, c'est le copier depuis mon comptoir. L'un des G en est un. Ensuite, je vais juste copier depuis les pistes 52, la cystéine, revenir au composant de l'application, puis Pestis Territory. Importons donc rapidement, ils utilisent un réducteur au niveau supérieur. Nous devons donc placer une virgule ici, alors. Utilisez un réducteur. Donc, directement dans le composant de l'application, qui est ce type ici, nous allons invoquer la méthode Use Reduce. Et bien sûr, cela prend en compte deux paramètres. L'un est la méthode du réducteur et le second paramètre est l'étape initiale. Et tout cela renverra un tableau de deux entrées. Je vais faire de la const. premier élément sera le compte, qui stockera la valeur de l'ensemble de l'état. Et les éléments du nid au sein de ce tableau seront la méthode d'expédition. Nous devons l'attribuer comme ceci. Le plus simple est que cela soit utilisé pour conserver l'ensemble de l'état, c' est-à-dire stocker la valeur de l'état entier. Ils seront ensuite utilisés pour lancer l'action Bhanwari. Lorsque nous procéderons à la mise en œuvre. Vous le comprendrez certainement assez bien. Affichons rapidement la valeur de l'état, vrai, à saisir dans les GSA. Et bien sûr, nous allons afficher les composants a, x et z. Allez en haut. Nous devons importer le composant a à partir d'un concours d'utilisation barre oblique compétente avec un reducer slash competent a. Ensuite, nous allons importer le composant x, le composant z. Laissons-le en bas de page. L'intention ici est donc d'envoyer une action, est-ce pas, au sein de ces composants. Nous voulons donc gérer ces données ici, n'est-ce pas ? Composantes N a, x et z. C'est exactement l'intention. C'est ce que l'on appelle les États mondiaux. Et nous voulons gérer les périodes de crépuscule au sein des composants imbriqués. J'enseigne bien, c'est beau. Si nous devons expédier l'action au sein de ces composants, nous devons utiliser le concours pour fournir la valeur du décompte et la méthode d'expédition à utiliser dans ces composants. Créons donc rapidement le concours en utilisant l'API Critic Contest. Tout en haut. Nous allons avoir const, Can't Contest, equa, React Dot, créer des concours. Donc, après avoir créé le concours, nous devons également l'exporter. fois cela fait, nous devons fournir une valeur à ce concours , puis intégrer le Une fois cela fait, nous devons fournir une valeur à ce concours, puis intégrer le composant précédent dans fournisseur du concours et spécifier les attributs de valeur, savoir la valeur actuelle et la méthode d'expédition. Laisse-moi te montrer rapidement. Donc, ici, nous allons terminer l'ensemble de la candidature avec le concours que nous avons créé. Et c'est le fournisseur de points pour les concours parce que nous devons lui fournir la valeur, surligner, puis le découper, venir ici, le coller. Et maintenant, nous devons fournir la valeur, valeur égale. Nous devons récupérer un objet. Nous allons donc avoir les états de décompte comme étant coma et le compte Dispatch sera Dispatch. fois cela fait, lorsque vous consulterez le navigateur, vous verrez cette erreur. L'état initial n'est pas défini. Revenez et nous devons définir l'état initial à droite, en haut. Les états initiaux sont égaux à zéro. Donc, lorsque vous faites cela et que vous consultez le navigateur, vous pouvez voir que les cônes initiaux sont nuls et qu' il s'agit de la valeur des états. Ensuite, nous avons les compétences a, x et z. La prochaine étape consiste à connaître l' état et la méthode d'expédition. Donc, pour cela, nous allons utiliser le concours qui a utilisé le code Back to VS. Ajoutons rapidement « entreprise  » en un coup d'œil. Ici , en haut de la page. Nous devons également importer un concours d' utilisation. Nous devons importer le contexte que nous avons créé dans le composant de l'application. Importer. Le nom du concours est Count Contest from AP. Très bien, il est donc temps de participer au concours. Donc, dans le cadre de la composante, nous allons invoquer le contexte américain. Prenons en compte le concours comme paramètre. Ensuite, nous devons l'affecter à une variable. Const peut participer comme ça. fois cela fait, nous pourrons accéder à la méthode d' expédition enregistrée sur Une fois cela fait, nous pourrons accéder à la méthode d' expédition enregistrée sur mon compteur, copier le bouton, puis le coller dans le composant a. OK, copions tout à partir d'ici, y compris l'étiquette d'en-tête, puis dirigeons-nous vers la société a. Et ici, nous n'avons plus qu'à le coller entre la balise div. Juste comme ça. Formatons rapidement pour avoir une indentation appropriée. Bien. Maintenant, le décompte va être fait, retirons l' étiquette pour le moment. Nous n'en avons pas besoin. Donc, ici, nous n' aurons plus cette dépêche comme celle-ci. Nous allons donc faire l'envoi de Count Contest point com. Laissez-moi vous montrer dans l'application Js. Nous allons faire venir ce type ici afin à bien chacune de ces actions. Le plus simple qui soit. Revenons donc à la composante a. Nous devons le faire pendant toute la durée de l'expédition. Je vais donc simplement sélectionner toutes les occurrences d'expédition et les effacer. Le concours malgré tout, sept commandes sur le navigateur. Pouvez-vous voir que l' état initial est zéro, puis que l'incrémentation, la décrémentation se réinitialise. Tout fonctionne parfaitement bien. Il suffit donc de gérer exactement le même état dans le reste des composants. C'est du moins l' intention de la conférence. Je suis là Je vais juste surligner tout ce qui trouve ici dans la copie du composant A, maintenir le composant X, surligner, puis l' effacer, le coller. Nous devons maintenant remplacer les occurrences du composant a par le composant x. Enregistrer. Jetez-y un coup d'œil. Magnifique. Ce n'est absolument pas bon. Encore une fois, pour mettre en évidence le composant z, effacez-le, collez-le, remplacez-le par le composant z. Alors vérifions-le pour voir si nous sommes capables de gérer cet état ici, n'est-ce pas ? Lorsque les sociétés A, X et Z apparaissent dans le navigateur. Très bien, faisons en sorte que le nom du composant soit descriptif. Entrez dans company et z et collez-le ici, désolé, compétent x. Et enfin, entreprise en z, en toute sécurité et sur l' os du navigateur. Alors allons-y jeter un coup d'œil. Si nous sommes en mesure de contrôler l'état global à partir du composant a, cliquons sur le vote par incrémentation dans le composant. Vous voyez que tout est en lambeaux, va bien, comme prévu. Quand tu décrémentes. Magnifique. Et puis, quand tu l' auras reçu, boum. Essayons-le en composant x par incréments, décréments, reçus. La composante A augmente, diminue, mes amis. C'est vraiment génial. Nous sommes donc désormais en mesure de gérer et de contrôler les droits des États mondiaux avec les composants n a, X et Z. Et cela est possible grâce à l'utilisation, au concours réducteur d'utilisation et aux visites. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 47. 45 useState de données: Vous avez dit que les navires utilisaient un réducteur pour montrer la comparaison entre le réducteur américain et le réducteur américain. Nous allons l'illustrer en récupérant des données à partir d' un point de terminaison d'API. Dans cet exemple, nous allons voir comment récupérer des données à l'aide de l'effet hook à l' aide des États-Unis, qui permettent de conserver le statut de la transaction ou de la transformation. Et dans la prochaine conférence, nous verrons comment récupérer les mêmes données avec l' effet américain Hooke en utilisant le réducteur d'utilisation pour maintenir la transaction étatique. Ce faisant, vous serez en mesure de comparer la dette américaine. Et ils utilisent un réducteur pour savoir quand et comment les utiliser. Nous n'avons pas consulté le répertoire des composants. Créons rapidement un nouveau package appelé ustedes et utilisons reducer. Hein ? Nous sommes donc dans ce package Créons un nouveau composant appelé phage de données d'utilisation. Générez les composants fonctionnels. Ce que nous allons faire dans cette conférence, c'est effectuer un appel d'API pour ajuster les données dès le montage du composant. Et pendant que les données seront récupérées, nous afficherons l'indicateur de chargement. Ainsi, lorsque les données seront correctes, nous masquerons l' indicateur de chargement et afficherons les données. Enfin, nous annulerons l'indicateur de chargement et afficherons le message d'erreur si un problème survient lors du chargement des données. Définissons rapidement les variables d'état et les méthodes de réglage. Et avant de passer aux papas, vous devez importer les États de l' UE depuis React. Nous devons donc déclarer les variables d'état nécessaires à utiliser. Et ici, nous allons avoir le chargement, sets plus calmes, le chargement. L'état par défaut sera défini sur true. Ainsi, lorsque nous effectuons un appel d'API, vous verrez la barre de chargement directement sur le navigateur. Et ici, nous allons avoir une erreur. Ensuite, nous allons placer la flèche ici. Il doit s'agir de touches virgules et l'état initial ici sera une chaîne vide. Enfin, nous allons avoir le message, et celui-ci devrait être votre âme et vos virgules. Et l'état initial sera un objet. Cela sera donc utilisé pour conserver l' état initial des données. Et ceux-ci seront utilisés pour mettre à jour l' état initial des données. En d'autres termes, lorsque nous récupérerons les données, celles-ci seront utilisées pour mettre à jour l' état initial de la publication. Lorsque les données sont traitées sous le capot, nous affichons l'indicateur de chargement ce qui est nécessaire en cas de problème. Enfin, cela sera utilisé pour stocker et mettre à jour l'état des nouvelles données. Ce serait juste. La ligne suivante consiste à créer la colonne appliquée et à la mettre à jour. La nécessité demeure. Pour effectuer l'appel d'API. Nous devons absolument invoquer l'effet américain. Tout d'abord, nous devons l'importer en haut à droite. Nous devons en invoquer les effets. Et l'effet prend en compte deux paramètres. première est la fonction, qui est dans ce cas une fonction de flèche. Ensuite, il y a un tableau de dépendances, et je vais le laisser comme une zone de densité vide. Une fois cela fait, la prochaine étape consiste à faire une requête get. Et pour ce faire, nous devons d'abord installer Acts Use. Et bien sûr, nous avons installé des axiomes plus tôt dans la conférence précédente. Mais si vous ne l' avez pas installé, il vous suffit de vous rendre sur le terminal puis de contrôler C pour arrêter le serveur en cours d'exécution. Ensuite, nous allons utiliser Node Package Manager Install Acts. Je l'ai déjà installé. Il n'est donc pas nécessaire de le faire une deuxième fois. Mais si vous ne l'avez pas sur votre machine, il vous suffit d'appuyer sur la touche Entrée pour l'installer. Permettez-moi de l'effacer, faire défiler la page vers le haut et je n'ai pas installé de RTO, nous devons l'importer sur l'axe d'entrée supérieur à partir des axiomes. La fonction intégrée au hook d'effets américain est appelée. Les effets. Ici, au moins, un effet secondaire se produit. Donc, dans la limite des droits, nous allons faire une demande d'obtention. Nous allons donc faire des axiomes. la plus simple pour Daughter est d'utiliser le point de terminaison de l'espace réservé JSON. Accédez donc rapidement à l'espace réservé Jason et copiez l'URL d'un article. Et nous voulons cibler l'itinéraire qui renverra un message spécifique. Je vais juste copier. Viens ici, non ? Nous sommes dans le fil. Je vais juste payer. Chaque fois que nous faisons une demande GET, elle renvoie toujours une promesse. Par conséquent, nous allons avoir un point de rupture de Dan. Ensuite, lorsque la demande est acceptée, nous devons effectuer la transition de certains États. Nous allons avoir ici une réponse. Lorsque la demande est réussie, nous devons définir le chargement sur false. Et nous devons également mettre à jour l'état initial avec les nouvelles données auxquelles nous sommes confrontés. Je vais donc définir les données de points de réponse aux publications. Enfin, nous devons définir la flèche sur une chaîne vide simplement parce que le Fetch est réussi. Erreur de réglage. Un stream vide. Cela se produit lorsque le Fetch est réussi, mais pas à chaque fois, vous aurez une conduite fluide. Oui, donc parfois tu peux avoir un problème. La récupération des données ne sera pas réussie. Donc, si quelque chose ne va pas, nous devons piéger la flèche, gérer sur le blog de cartes. Spécifions rapidement le bloc de capture, n'est-ce pas ? Après ce type, qui est la tanière, la promesse qu'il reviendra, nous aurons le canapé. Et ce que je vais attraper, est que nous allons attraper n'importe quelle flèche existante qui sera trouvée. Nous devons également mettre notre charge en vigueur. Nous devons définir le post sur un objet vide, qui est l' état initial de la pose. OK, laisse-moi te montrer le sommet. Et le voici, non ? Parfait. Ensuite, nous devons définir l'erreur. Donc quelque chose comme ça. Nous allons donc faire quelque chose qui a mal tourné. Après l'avoir fait dans les effets. La prochaine étape consiste à afficher les données dans les GSA. Si le composant est Busey qui charge les données, nous allons afficher l'indicateur de chargement. De plus, lorsque les données sont récupérées avec succès, nous devons les afficher directement entre crochets, car ici, nous devons utiliser l'expression JavaScript de l'insuline. Je vais le faire si le chargement est égal à vrai. Très bien, donc si l' application est en cours de chargement, nous allons dire que les données sont en train de charger une autre. Si les données sont récupérées, nous devons obtenir le titre du point de publication. Regardons le post. Nous pouvons obtenir le titre ou le corps. Allons chercher le corps du message. Et nous voulons également afficher l'erreur à l'écran. Donc, s'il y a une erreur, nous devons l'afficher, qui est inscriptible ici. Et s'il n'y a pas d'erreur, nous devons le configurer pour qu'il sache quand vous enregistrez le mélange d'applications pour rendre dans le composant de l'application. Viens ici. Et nous avons fait tout cela lors de la conférence précédente. Je place donc simplement le commentaire dessus. Importez, utilisez-le, data phage à partir de Component Slash, utilisez-le et avez utilisé Reducer Slush, utilisez l'ère numérique. J'ai trop parlé. Vous avez raison, alors faisons-le correctement, dans le composant de l'application. Vous déclarez leur effet. Nous devons également exécuter l' application ici. Et je vais faire npm start width pour ça. Il montre l'indicateur de chargement. Et lorsque le processus a été couronné de succès, il a garanti les données. Ainsi, lorsque vous rechargez l'application, vous verrez certainement l'indicateur de chargement. Pouvez-vous le voir, même si cela apparaît en un clin d'œil ? Mais si votre connexion Internet est assez lente, vous allez le voir en quelques secondes. Jette un coup d'œil. voir que tout fonctionne parfaitement comme prévu. Permettez-moi donc de vous montrer quelque chose, car nous voulons également nous assurer que l'indicateur de flèche fonctionne parfaitement. Revenez donc à VS Code. Et ici, je vais juste modifier l'URL. Cette URL est incorrecte. Par conséquent, l'erreur va s'afficher à l'écran. Lorsque vous enregistrez dans le navigateur. Rechargez. Oups, quelque chose s'est mal passé. Le but de cet exemple est de vérifier les étapes de la transaction lors de l'utilisation de l'état américain comme variable d'état pour récupérer des données. Voyons à quoi cela ressemble lorsque nous implémentons ce même exemple avec l'utilisation Reducer who ? C'est tout pour le moment, dans la prochaine conférence, nous allons voir comment implémenter cet exemple avec le réducteur d'utilisation. Rendez-vous lors de la prochaine conférence. 48. 46 useReducer DataFetch: Dans la conférence précédente, nous avons vu comment récupérer des données avec l'effet Hooke d'utiliser ce hook pour gérer la transaction successorale. Dans cet exemple, nous allons donc voir comment récupérer des données avec l'effet américain Hooke en implémentant le hook Use Reducer pour maintenir et gérer cette transaction TID. Dans ce package, nous allons créer un nouveau composant appelé phage des données utilisateur. Générez le composant fonctionnel. Importons rapidement le réducteur d'utilisation et l'effet américain. Donc, juste au plus haut niveau, utilisez le réducteur, le coma. Utilisez également l'effet. Nous devons importer nos PDG à partir d'axiomes. Déclarer l'état initial en tant que propriété d'un seul objet. Laissez-moi vous montrer comment procéder rapidement. État initial constant, définissez-le comme un objet vide. Et bien, au sein de l'objet, nous allons regrouper l' ensemble de l'état que nous allons avoir dans l' application, directement à l'intérieur. Nous allons lancer le chargement, le régler sur true, comme nous l'avons fait lors de la conférence précédente. L'erreur l'a définie sur une chaîne vide et la publication sur un objet vide. Ce sont donc les transitions dont nous avons besoin dans cette application. Et grâce à eux, nous avons pu regrouper l'ensemble de l'état au sein d'un objet. Et vaste, extrêmement cool. Définissons rapidement la fonction du réducteur. Donc, une fois cela fait, venez ici, nous devons invoquer le réducteur. donc prêts à utiliser le réducteur, nous allons prendre le réducteur et l'état initial en tant que paramètre. C'est donc l'état initial que nous avons en haut ici. Pour le réducteur, nous devons également définir le réducteur. Je vais faire const, réduire un noyau, le régler sur une fonction de flèche. Et la réduction qui prend en compte deux paramètres. Il y a d'abord les États , puis l'action. Nous avons maintenant une transition en deux étapes à mettre en œuvre. première est lorsque la demande est réussie, et la seconde, lorsque la demande échoue. Laisse-moi te montrer rapidement. Revenez à l' état d'équilibre du phage aux États-Unis. Ce sera la transition des premiers états, et c'est la transition du second état. Voyons comment les implémenter rapidement. Alors, bien sûr, dans la fonction réducteur, nous allons avoir un interrupteur. Et l'expression du commutateur sera de type point d'action. Donc, le premier cas sera data fetch socks x. Data underscore fetch underscore socks x. Donc, si tout va bien, nous allons maintenant recommencer le chargement, comme nous l'avons fait dans la leçon précédente. Le post. Nous allons avoir la virgule Action Dot pour la charge utile. Et puis l'erreur sera également une chaîne vide. Le second cas est lorsque la demande est remplie. Nous allons donc avoir ici une erreur de soulignement, de récupération et de soulignement des données de cas. Lorsqu'une erreur se produit, nous allons renvoyer quelque chose comme ceci. Hein ? Dans le retour, nous allons configurer le chargement pour forcer le message à être défini sur un objet vide, puis l'erreur, quelque chose s'est mal passé. Et bien sûr, nous devons spécifier le cas par défaut, qui renverra l'état. Formatons rapidement le code pour une indentation correcte. Je ne les ai pas fait. Viens ici. Ainsi, pour le hook use reducer, il renvoie une paire de valeurs, qui est l'état actuel et la méthode de distribution const state comma dispatch , puis l'attribue comme suit. Et maintenant, nous allons passer l'appel à l'API. Et bien entendu, cela devrait se faire dans le cadre de l'effet qui permet d' invoquer rapidement l'effet américain. Il suffit de copier directement le cours précédent pour utiliser les données, récupérer des données. Ensuite, je vais copier les lignes 92, les lignes 21. Copie. Viens ici, non ? Nous sommes en fonction. Nous devons payer. Apportons les modifications nécessaires. Il suffit donc de remplacer les occurrences usagées directement dans le bloc promis. Nous allons mettre en évidence les voies 35 à 37. Essuyez-le. Maintenant que l' engraissement est réussi, nous devons lancer l'action. Envoi. Hein ? Nous en sommes à la méthode d'expédition. Nous allons récupérer un objet. Ensuite, nous devons spécifier le type d'action et le type d'action à envoyer lorsque le Fetch est réussi est composé de données sur le phage Dusko sur des chaussettes Vasco x. Laissez-moi vous montrer en haut de la page. Voici les surlignages, puis les copier. Viens ici, colle-le. Nous sommes dans le fil. Lorsque nous expédions les produits toxiques à récupérer des données, nous devons spécifier la charge utile. Et la charge utile sera constituée de données par points de réponse. Laissez-moi vous expliquer ce qu'est une charge utile dans un GeV. La charge utile est constituée des données que votre réducteur utilisera pour mettre à jour l'état. Nous allons donc récupérer de nouvelles données. Ensuite, cela sera utilisé pour mettre à jour l'état initial. Et bien sûr, l' état initial n'est qu'un objet vide. Donc, juste à l'intérieur du bloc de capture, nous devons lancer l'action de la flèche. Expédition, non ? Méthode d'expédition prête à être utilisée. Nous devons spécifier le type d'action. Le type de cette action sera la suivante : extraction du trait de soulignement des données, erreur de soulignement. Viens ici et colle. C'est aussi simple que cela. Nous n'avons donc pas besoin de spécifier la charge utile ici simplement parce que nous avons déjà spécifié le message d'erreur. Et voici le message d'erreur. Affichons rapidement les données sur le navigateur. Il suffit de copier les antagonistes des exemples précédents. Un ajout d'états à tous les noms de variables simplement parce qu'ils font tous partie de l'objet d'état , c'est vrai, dans le phage de données américain, il suffit de copier le corps comme celui-ci. Surlignez et copiez. Viens ici. Collez-le comme ça. Formatons rapidement pour une indentation correcte. Parfait. Ce que je vais faire maintenant, c'est ajouter des états à toutes les variables. State Dot est en cours de chargement. Et ici, nous allons faire le DOT de l'État. Publiez ce corps. Affichez-le rapidement dans le composant de l'application, et voyons ce que nous avons sur le navigateur, c'est de réduire notre récupération de données à partir d'une barre oblique compétente à tous ces niveaux de répertoire que vous devez cibler. Et venez ici, faites un commentaire sur ces énormes phages de données réducteurs. Enregistrez et passez au navigateur. Voyons le résultat attendu. Oups, quelque chose s'est mal passé, les gars. Vous vous souvenez peut-être que lors de la conférence précédente, nous avons modifié l'URL. Nous devons donc revenir à Jason. Veuillez patienter pour copier l'URL appropriée. Et le voici. Copiez, venez ici et collez. Et je pense qu'il est également bon d' apporter la correction ici. Très bien, afin que vous ne rencontriez pas de problèmes à l'avenir lorsque vous voudrez référencer mon code. OK, ici, économisez et voyons le centre de villégiature accéléré. Elles sont si belles. Tout fonctionne parfaitement comme prévu. Maintenant, la différence entre cet exemple et ce que nous avons fait dans la conférence précédente est que nous avons pu regrouper l'état relatif. Laisse-moi te montrer le haut, comme ça. De plus, les transactions par étapes sont également regroupées. Maintenant, l'argument est le suivant. S'ils utilisent un réducteur et en déduisent que Hooke est tous deux utilisés pour la gestion de l'État. Quand sera-t-il préférable de remplacer l'utilisateur-utilisateur ? Les États-Unis se sont accrochés si rapidement. Discutons-en lors de la prochaine conférence. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 49. 47 useCallback de rappel: Dans cette conférence, nous allons étudier un autre problème d'impuissance , à savoir le rappel américain. Cependant, il est très important de comprendre l' optimisation des performances avant procéder à l'utilisation des callbacks. C'est donc clair pour vous. Nous pouvons maintenant discuter de ce qu'est un rappel d'utilisation, pourquoi et quand vous devez l'utiliser. Et là, j'ai déjà élaboré une simple contre-obligation. Alors vite, laisse-moi t'expliquer. Passons maintenant aux composants de l'application. Et ici, nous avons rendu un composant appelé composant principal. Et voilà, en ce qui concerne le composant principal, nous avons deux composants différents, qui sont réutilisés avec des propriétés différentes pour afficher des informations différentes. Et le premier est le composant Counter. Ce composant de compteur est chargé d'afficher le nombre actuel d'enseignants. Le composant bouton est chargé d' incrémenter l'enseignant. Ensuite, nous allons réutiliser le composant Counter pour afficher le nombre d'étudiants. Ensuite, nous avons également réutilisé le composant bouton pour incrémenter les étudiants. Et toute cette fonction ici est définie en haut. Nous avons ici les incréments, la fonction de chat, les incréments des étudiants, puis nous avons les variables d'état nécessaires en haut. C'est vrai, nous sommes dans cette fonction. Nous progressons, apprenez-nous par cinq. Ici, nous augmentons le nombre d' étudiants de dix. Très bien, tout cela se produira lorsque vous cliquerez sur le bouton . Alors reviens ici. Lorsque vous observez cette composante, vous vous rendrez compte que nous réussissons le test en tant que sondes et que vous vous rendez compte de l'état actuel du professeur. Et le composant inférieur, nous prenons le clic sur la poignée comme des sondes, puis nous transmettons la fonction t-test des incréments en tant que valeur. Cette fonction est définie en haut. Bien sûr, je te l'ai déjà montré. Et c'est pareil ici. Nous avons pris le nombre d'intestins comme accessoires, puis nous leur transmettons la valeur des étudiants actuels, n'est-ce pas ? Ce bouton ne ferait-il pas, nous passons le clic de la poignée sous forme de sondes et nous prenons en compte les incréments, les étudiants car sa valeur, qui est la valeur des invites, se dirigent rapidement vers le composant du bouton. Ainsi, juste à l'intérieur des composants inférieurs, le manche, la clique et les enfants seraient déstructurés. Ici, nous avons implémenté un bouton en cliquant sur ce bouton. Nous prenons en compte cette invite, qui est le clic sur la poignée pour obtenir la valeur de l'incrémentation de l'enseignant sur la fonction incréments de l'étudiant. Et ici, nous les transmettons aux enfants sous forme de code HTML interne. Cela va donc montrer le test entre le Bolton. Permettez-moi de vous montrer rapidement le composant principal. Donc, le code HTML interne, ici, ce type incrémente les étudiants et augmente le professeur. Ils seront affichés cause des accessoires parsemés d'enfants. Bien sûr, tu devrais le savoir maintenant. Passons rapidement au composant Counter. Les droits conférés au composant Counter détruiraient votre test et votre décompte. Et ici, nous passons des tests et nous comptons le nombre, ce qui indique la valeur actuelle des professeurs et des étudiants. Pour terminer, nous avons créé un nouveau répertoire appelé use callback practice. C'est ici. Donc, dans ce répertoire, nous avons créé tous ces composants, puis nous avons rendu le composant principal dans l'application Js. Et bien sûr, le composant bouton et le composant count sont imbriqués dans le composant domaine. Et en haut, nous les avons importés, c'est aussi simple que cela. Je n'ai pas compris l'application. Passons rapidement aux affaires du jour. Ferme-le. Le but de cet exemple est donc de se concentrer sur l'optimisation des performances et de mesurer les performances. Nous avons un extrait de journal ici. Laisse-moi te montrer. Pouvez-vous voir que cela aidera à montrer le composant en cours de rendu. Et ici aussi, nous avons quelques relevés de journal. Donc, des droits dans le terminal. Nous devons exécuter l'application. Parfait. C'est exactement ce à quoi nous nous attendons. Ainsi, lorsque je clique sur les incréments, chacun de ceux que nous apprenons sera incrémenté de cinq. Tu vois ? Et lorsque je clique sur les incréments , les étudiants seront incrémentés en prenant. Tout semble fonctionner parfaitement bien. Jetons un coup d'œil à la console et voyons quels harpons sont plus hauts, n'est-ce pas ? Donc, pour les statistiques, il suffit de vider à nouveau la console pour qu'elle apparaisse propre. Maintenant, je vais passer à l' incrémentation de t fois en votant. Lorsque je clique sur les professeurs par incrémentation, vous pouvez voir le rendu des professeurs, mais les détails par incréments se trouvent ici. Vous allez voir le rendu des étudiants et le rendu des incréments de navigation des étudiants. Quand je clique sur les incréments des étudiants, vous verrez une déclaration de journal féminine indiquant le rendu des professeurs, incrémentation des votes, les professeurs rendant les étudiants, rendu des étudiants par incréments. est donc malheureusement là que réside le problème. Parce que si nous cliquons sur les incréments, il n'est pas nécessaire de restituer le composant incréments étudiants. Mais dans ce cas, lorsque nous augmenterons le nombre d'enseignants, les composants des élèves seront restitués. De plus, lorsque nous augmenterons le nombre d'élèves, les composants destinés aux enseignants seront restitués. Et cela entraînera des problèmes de performances dans votre application. Alors imaginez que nous avons plus de 100 composants ici. Et en mettant à jour un seul composant, le reste du composant des années 1990 sera rendu à nouveau. Des amis. Ce ne sera pas du tout agréable car vous commencerez à rencontrer des problèmes de performances. Par conséquent, pour optimiser les performances, nous devons afficher précisément uniquement le composant qui doit être rendu à nouveau lorsqu'il indique ou demande des modifications. Et cela se fera avec React Dot Memo. React Dot Memo est un outil fantastique pour mémoriser des composants fonctionnels. Et lorsqu'il est appliqué correctement, il empêche un composant fonctionnel de ne pas s' afficher à nouveau si l'état des instructions n'a pas changé. Ça a l'air bien. Un pouvoir magnifique, non ? Vous pouvez donc considérer la mémorisation comme une méthode de valeur cardinale, sorte qu'il n'est pas nécessaire recalculer lorsque l'état ou les sondes n'ont pas changé. Optimisons donc rapidement cette application avec React point mammal VS Code. Et passons rapidement au composant principal. Très bien, donc pour optimiser l'application, ce que nous allons faire est assez simple. Donc, ce que je vais faire maintenant, c'est mettre en évidence valeurs par défaut d'exportation de ce type, puis l'appeler. Viens ici, colle-le, et ensuite nous allons faire React Dot Mammal. Et maintenant, nous devons passer. Le composant est aussi simple que cela. Donc, ce que je vais faire maintenant, c'est surligner et copier. Passons à la composante de vote. Viens ici, colle. Nous devons changer le composant en composant votant. Par ici. Supprimons les valeurs d'exportation par défaut. Faites de même dans le composant Counter. Supprimez les paramètres d'exportation par défaut, venez ici, collez. Nous devons donc passer ici à la composante préoccupante , à savoir la contre-composante. C'est aussi simple que cela. Enregistrez et examinons le navigateur. Rafraîchir. Lors du premier rendu, vous verrez tous les composants directement sur la console. Le rendu nous apprend des achats aléatoires par incréments, les professeurs, rendu des étudiants, puis rendu des incréments de vote des étudiants. Effacons la console. Essayons-le maintenant en cliquant sur le professeur d'incrémentation. Tu peux voir ? Maintenant, nous avons le rendu des professeurs, achetés au hasard par incrémentation , puis des professeurs par incréments de vote. Pour l'instant, nous sommes en mesure d' optimiser légèrement l'application. Parce qu'ici nous avons toujours le rendu, mais par incréments, étudiant, directement sur la console, ce qui n'est pas très bon. Ainsi, lorsque nous aborderons les incréments, étudiant, vous allez voir des incréments aléatoires , des professeurs créer des élèves, puis des incréments d'internat aléatoires des étudiants. Le but de cette conférence est donc d'éviter tout rendu inutile. Parce que lorsque vous cliquez sur le vote des étudiants, la composante relative aux enseignants ne doit pas non plus être restituée. Lorsque vous cliquez sur les professeurs, le composant relatif aux étudiants ne doit pas être affiché à nouveau. Et maintenant, cela va poser un nouveau défi, car nous ne modifierons pas l'état de la composante étudiante. Mais le voici en train d'être rendu à nouveau. Permettez-moi de vous le montrer à nouveau rapidement. Et je clique sur les fonctionnalités incrémentielles. Vous voyez que le rendu du vote augmente les étudiants. Nous ne modifions pas l'état de la composante étudiante, nous ne voulons donc pas qu'elle soit restituée. Mais ici, sur la console, vous pouvez voir que le vote de la composante étudiants est en cours de rediffusion. Lorsque vous effacez la console et que vous faites même pour incrémenter l'élève, vous verrez apparaître le composant lié à l' enseignant, qui est le composant bouton de l'enseignant. En cours de restitution également. C'est ce que l'on appelle des rendus inutiles. Permettez-moi de vous expliquer rapidement ce qui se passe sous le capot. Dirigez-vous vers le composant principal. Nous avons donc ici le composant Counter qui accepte les enseignants comme sondes. Le composant bouton accepte le professeur d'incréments lorsqu'il sonde la valeur, qui est la fonction définie en haut. C'est ici ? Cela signifie donc simplement que lorsque l'état de l' enseignant est mis à jour, le composant Counter de l'enseignant et le composant bouton de l' enseignant seront restitués. Mais le problème aujourd'hui, c'est que même le vote des étudiants est retransmis. Cependant, le composant de contact d'un étudiant ne s'affiche pas à nouveau. Cela tient simplement au fait que lorsqu'un nouvel appel, les incréments de chacune de nos fonctions, une nouvelle fonction d' étudiant incréments est créée chaque fois que le composant parent est rendu à nouveau. Et bien sûr, lorsque nous travaillons avec une fonction, nous devons prendre en compte une égalité de référence. Ainsi, même si ces deux fonctions se comportent exactement de la même manière, cela ne signifie pas qu'elles sont égales l'une à l'autre. Par conséquent, la fonction avant le nouveau rendu est différente de la fonction après le nouveau rendu. Donc, simplement parce que nous transmettons la fortune en tant qu'accessoires, React, point memo se rendra vite compte que les sondes ont changé et ne pourra pas éviter le nouveau rendu. Un peu strié, non ? Laisse-moi le détailler. Lorsque vous incrémentez les professeurs par incréments, fonction étudiant est créée, ce qui entraîne le réaffichage des votes des étudiants par incréments. Et lorsque vous incrémentez les élèves par de nouveaux incréments, chacune de nos fonctions sera créée, ce qui entraînera également le nouveau rendu de la fonction d'enseignant par incrémentation. Maintenant, la question est comment informer, réagir pour ne pas créer nouveaux ajouts à cette fonction lors de la mise à jour Les professeurs ont raison. Donc, c'est à Lee que vous gagnez de l'argent. Alors, à quoi servent les crochets de rappel ? Ils utilisent le callback et renvoient la version MMO de la fonction de rappel qui ne change que si l'une des dépendances a changé. Donc, en toute simplicité, ils utilisent crochet de rappel qui est utilisé lorsque vous avez une compétence dans laquelle un enfant effectue des rendus à plusieurs reprises sans en avoir besoin. Très bien, donc pour implémenter le rappel d'utilisation, plusieurs conditions doivent être remplies. La condition est que nous devons avoir une fonction de rappel. La deuxième condition est que nous devons optimiser les composants du graphique avec React point memo. Laisse-moi te montrer. Ici. Nous avons optimisé le composant enfant, et ici nous avons également optimisé le composant enfant. La troisième condition est que nous devons vérifier l'égalité de référence. Pour l'égalité de référence, nous devons vérifier si les fonctions sont égales. Donc, si la condition ci-dessus est satisfaite, nous pouvons alors continuer à optimiser notre application avec le hook de rappel américain. Hein ? Ainsi, pour implémenter le hook use callback, plusieurs étapes sont nécessaires. Ne vous inquiétez pas, les étapes sont en effet très simples. Faites défiler l'écran vers le haut. Tout d'abord, nous devons importer l'utilisation Kohlberg. Ensuite, la deuxième étape consiste à invoquer l'utilisation de Kohlberg. Et ils utilisent le callback, une fonction qui prend une fonction de rappel comme premier argument. Donc, ce que je vais faire maintenant, c'est copier cette fonction, comme celle-ci, surligner la couleur. Viens ici et colle. Ensuite, nous devons l'affecter à une variable comme celle-ci. Hein ? Magnifique. Le deuxième argument du rappel américain est donc une artère de dépendance. Donc, ce que je vais faire maintenant, c'est spécifier une virgule , puis prendre la zone de dépendance. Et ce rappel dépend de la variable du professeur pour démarrer. Venez ici, surlignez-le, copiez-le, collez-le directement dans la dépendance. Cette fonction ne sera déclenchée que lorsque l'état des professeurs changera, c'est aussi simple que cela. Répliquons donc la même chose pour l'étudiant. Utilisez le callback. Acceptez une fonction de rappel comme premier argument. Copiez ceci. Surlignez et enduisez, venez ici, collez-le. Ensuite, ici, nous devons l'attribuer à une variable comme celle-ci. Le deuxième argument est un tableau de dépendances. Cela se déclenchera lorsque l'état de l' étudiant changera. Il suffit donc de spécifier les étudiants comme tableau de dépendances. Cela signifie donc simplement que cela dépend l'état de l'étudiant pour s'énerver. Si les étudiants ne changeaient pas, la fonction ne serait pas bloquée. C'est aussi simple que cela. Nous devons donc l' attribuer comme ceci. Une fois cela fait, vérifions-le rapidement sur le navigateur. Rafraîchir. Parfait pour le personnel, lorsque l'application se charge, l'ensemble des composants sera rendu. Actualisons rapidement la console. beaucoup de personnes cliquent sur les incréments, les professeurs sur la console, vous vous rendrez compte que seul le composant lié au t-test est ce qui est restitué. D'accord ? Vous n'aurez donc plus à effectuer nouveaux rendus inutiles de nouveaux rendus inutiles, comme le composant étudiants. De plus, lorsque vous incrémentez les élèves, éliminons la console puis incrémentons jusqu'à la fin. Vous vous rendrez compte que seul le composant ultérieur des étudiants est affiché à nouveau à l'écran. Et la preuve se trouve sur la console. Donc, avec cela, on peut dire que l'application est entièrement optimisée. Vous voyez que nous n' avons plus de rerendus inutiles. C'est vraiment génial et j'adore ça. Des amis. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 50. 48 useMemo crochet: Dans la conférence précédente, nous avons abordé l' utilisation du crochet de rappel, qui met l'accent sur l'optimisation des performances. Dans cette conférence, nous allons donc discuter de l'utilisation de mémo hooks, qui se concentrent également sur l'optimisation des performances. Le crochet React use mémo renvoie une valeur humide. Et je veux que vous considériez la mémorisation comme valeurs de Cagian afin qu'elle n'ait pas besoin d' être recalculée. Techniques, ils utilisent Mama Hook, ne fonctionne que lorsque l'une de ses dépendances à des actes. Et cela améliore les performances. Donc, pour comprendre les œuvres de hauteur, nous allons l'illustrer. Créons rapidement un nouveau package appelé use memo practice, n'est-ce pas ? Nous sommes dans le nouveau dossier Components. Je suis prête à utiliser plus de pratique. Créons une nouvelle entreprise dans mon mémo, counter point js. Générez rapidement le composant fonctionnel. Ensuite, déclarons les variables d'état nécessaires et définissons notre fonction à utiliser. Et bien sûr, vous devez importer le statut d'État américain. n'est pas possible. Ce que je dois faire ici, c'est utiliser les touches virgules , c'est la fonction de configuration. Et l'état initial va être. Zéro. Surlignez, dupliquez-le. Ensuite, je vais surligner la lettre majuscule, une commande D pour sélectionner les occurrences, effacer, les modifier pour qu'elles soient. Nous avons donc les variables d'état du compteur a et du pays B. Le plus simple qui soit. Et ici, nous allons définir une fonction pour incrémenter a d'un, puis également incrémenter le compteur b de deux. Constante. Incrémentez a. Equa, réglez-le sur notre fonction. Ensuite, je vais mettre le compteur a entre parenthèses. Nous allons prendre en compte les nouvelles mises à jour contactant un plus un. C'est aussi simple que cela met en valeur, reproduisez-le. Il suffit de sélectionner les occurrences de celles-ci, de les modifier pour qu'elles soient. Et ici, il suffit de faire COUNTA être plus un. Nous voulons donc illustrer le mémo d'utilisation avec une simple contre-application. Faisons rapidement apparaître quelque chose à l'écran. Ici, nous allons avoir une balise p. Dans la balise p, je vais faire un e is, bien sûr, vous devriez le savoir maintenant. Ici, nous voulons implémenter un bouton pour incrémenter le compteur. En cliquant sur ce vote. Nous allons appeler la fonction incrémenter une dette simple. Donc, ce que je vais faire maintenant, que nous aurons une autre division. Surligne ce gars des lignes 18 à 19, déplacez-le dans cette nouvelle division que nous avons créée. Permettez-moi donc de formater rapidement le code. Parfait. Je vais donc mettre en évidence les doublons des lignes 15 à 18. Ici. Nous allons faire b. B et b. Et B , Oh mon dieu, j'aurais dû juste sélectionner les occurrences et le faire une fois. Lorsque vous enregistrez l'application, dirigez-vous vers les objets et exécutons-la. Cet endroit est assez désordonné, mais nous devons le gérer comme ça. Importe le nombre de mes mémos à partir de votre original, redescendez, surlignés. Postez un commentaire dessus. Découvrez-le sur le navigateur. Magnifique. Tout fonctionne parfaitement bien. Essayons-le donc. Un bon, soyez bon, tout fonctionne parfaitement bien. C'est donc exactement là que le plaisir commence. Maintenant, améliorons l'application. Supposons donc que nous voulions afficher même lorsque le nombre est pair ou impair, lorsque le nombre est impair. Améliorons-le rapidement. Viens ici. Nous allons avoir une autre fonction, constante, nombre pair. Réglez-le sur notre fonction. Ce gars va prendre tes résultats. Et ici, je vais faire un résultat égal à un module deux égal à zéro. C'est donc le plus simple. Ensuite, nous devons retourner quel que soit le résultat. Parfait. Cela fait, affichons-nous rapidement sur l'interface utilisateur. Juste à l'intérieur de la balise p du compteur. Nous devons poser certaines conditions ici. Donc, a est quelle que soit la valeur de l'état, et ensuite si elle est paire ou impaire. Nous devons donc spécifier si le nombre est pair ou impair. Et, euh, je vais le faire ici. Tout d'abord, nous devons appeler la fonction. Même. Après cela, nous devons procéder à un contrôle. Si le nombre est pair, alors nous allons dire pair. Maintenant. Nous allons dire étrange. plus simple est de sauvegarder l' application et de la consulter sur le navigateur. Rechargez. OK, donc incrémentons a. Pouvez-vous dire que cela indique que le compteur est un et que c'est impair. Encore une fois, ça dit que a est deux, n est pair, juste comme ça, non ? Une autre chose que nous voulons faire est extrêmement importante est qui est extrêmement importante est d'essayer de ralentir le fonctionnement hivernal. Supposons donc que nous voulions que cette fonction soit exécutée en quelques secondes. Très bien, nous voulons donc retarder l'occlusion. Donc, pour cela, nous devons induire une certaine lenteur dans la fonction. Faisons-le rapidement. Passez au code VS. Juste ici. Je vais faire en sorte que je sois égal à zéro. Ensuite, tant que I est inférieur à, nous allons avoir 09 fois plus exactement, puis nous devons incrémenter I d'un. Ce faisant, nous avons ralenti cette fonction. Cela ralentira donc le calcul dans les silicones. Accédez au navigateur. Rechargeons. Maintenant, lorsque je clique sur Contact air, vous pouvez voir qu'il faut quelques secondes pour que a s'incrémente ? Essaie encore une fois. Vous voyez ici que Lee est là où réside le problème. La lenteur a donc été provoquée sur le campus a. Mais maintenant, lorsque je clique sur le compteur b, voyez-vous que nous ressentons toujours la même lenteur Laisse-moi réessayer. Vous voyez qu'il faut quelques secondes pour que le compteur soit calculé et que les résultats s'affichent à l'écran. Mais écoutez, ce n'est pas ce que nous voulons ici. Tout ce que nous voulons, c'est provoquer la lenteur contact a et non à l'apparition. Nous ne voulons donc pas que cela affecte le compteur b. Donc, ce qui se passe ici, c'est que chaque fois que l' état est mis à jour, le composant s' affiche à nouveau. Et lorsque le composant s'affiche, la fonction numéro pair est invoquée pour la deuxième fois. Et bien sûr, la fonction est très lente et ralentira donc l' ensemble du processus et la mise à jour de l'interface utilisateur. Nous ne voulons pas que cela arrive à l'application. La solution à ce problème consiste donc à empêcher recalcul de valeurs inutiles. Et dans ce cas, nous allons informer, réagir et ne pas effectuer ce calcul lorsque nous modifierons la valeur du compteur, le plus simplement possible, qu'il n'est pas nécessaire de calculer et de montrer quel nombre est impair ou pair lorsqu'il s'agit du pays B. Parce que c'est exactement ce l'application semble faire en ce moment. Revenez en arrière. Lorsque vous cliquez sur Contact. Le calcul prend quelques secondes, sans savoir si le nombre est pair ou impair. contact B n'est pas intéressé à savoir si le numéro est pair ou impair. Mais quand même, lorsque vous incrémentez le compteur B, le calcul prend quelques secondes . Tout simplement parce que cette lenteur que nous avons provoquée chez ce gars ici l' affecte. Nous devons donc éviter les calculs inutiles. Et pour éviter ce calcul inutile, nous devons utiliser le mammifère américain. Revenez au code VS pour implémenter l'utilisation du mémo hook. D'abord. Il doit également être importé comme tous les autres crochets. Le mama hook d'occasion est une fonction que nous devons invoquer. Alors viens ici. Je vais utiliser un mémo. Le mémo va entrer en vigueur. La valeur de la fonction de retour doit être appelée comme premier argument. Dans ce cas, la fonction permettant de calculer le nombre est paire ou impaire. Donc, ici, je vais juste copier à partir d'ici comme ça, les surligner, les couper, venir ici et le coller comme premier argument d'utilisation du mémo. Le deuxième argument est une virgule de tableau de dépendance prise sur un tableau vide. Pour que cette fonction soit activée, elle doit dépendre de a. Et je vais faire un compteur a. Juste comme ça. Après ça, met en valeur ce gars, coupe. Viens ici, attribue-le comme ça. Cela étant fait, le nombre maléfique n'est plus un appel de fonction car il stocke désormais une valeur. Revenez donc à l'interface utilisateur ou supprimez les parenthèses. Nous devons éliminer ce type. Enregistrez l'application, les anticodons, le navigateur, rechargez. Hein ? Essayons-le en cliquant sur l'incrément a. Vous voyez ? L' incrémentation de a prend quelques secondes. Jette un coup d'œil. Essayons-le donc sur B. Voyez-vous que le compteur B s' incrémente sans perdre de temps ? Maintenant, la lenteur que nous avons induite sur le compteur a ne fonctionne parfaitement que sur le contact a. Et cette fois-ci, cela n' affectera pas le compteur, simplement parce que nous avons implémenté l'utilisation du mémo hook pour optimiser l'application. Et dans ce cas, la lenteur est induite sur le compteur approprié. Ainsi, chaque fois qu' un contact change, React recalcule la valeur et ne tient pas compte de la valeur de la carte, ce qui implique simplement qu'il n' utilisera plus la valeur de la carte. Ainsi, puisque la valeur n' a jamais changé pour le compteur a, il n'est pas nécessaire de recalculer la valeur impaire ou paire pour ensuite React utilisera la valeur du React utilisera la valeur du rendu précédent, ne sera pas affectée par ce clonus que nous avons induit. Et maintenant, la question est quelle est la différence entre le rappel Use et l'utilisation de Mammal ? L'utilisation du callback est utilisée pour intercepter une fonction, tandis que le mémo d'utilisation est utilisé pour couper le résultat d'une fonction invoquée. est aussi simple que cela. Ou vous pouvez dire que le rappel américain est utilisé pour intercepter une fonction de rappel. C'est tout pour le moment et à la prochaine conférence. 51. 49 useRef Ref: Dans cette conférence, nous allons étudier l'utilisation du crochet ref. Le hook habituel est utilisé pour accéder à un élément DOM directement dans le composant fonctionnel. Et il peut également être utilisé pour stocker une valeur modifiable qui ne provoque pas de nouveau rendu lors de sa mise à jour. De plus, l'utilisation d'un crochet brut vous permet de conserver la valeur entre les rendus. Allons-y pour illustrer. L'objectif de cet exemple est de focaliser le droit causal dans le champ de saisie lors du chargement de la page. Par exemple vous créez un formulaire d'inscription. Nous voulons placer le curseur directement dans le premier champ de saisie lors du chargement de la page. Créez rapidement un nouveau package appelé user of practice. Et j'espère que vous avez aimé la façon dont j'organise les conférences. Pour l'utilisateur de la pratique, créons un nouveau composant appelé imputation du coût total. Les droits figuraient dans l'interface utilisateur. Créons une querelle olympienne. Le type Equal Test. Fermez-le à l'aide de l'étiquette à fermeture automatique. Effectuez rapidement le rendu de ce composant dans l'application. Les importations américaines se concentrent sur ce type. Et ici, nous devons nous concentrer sur des périodes. Voyons ce qui se passe sur le navigateur. Voici le champ de saisie. Laisse-moi zoomer un peu. Parfait. Revenons à VS Code. Concentrez-vous sur une entreprise impute. La ligne suivante consiste à implémenter la fonctionnalité de montage du composant. Tout d'abord, nous devons importer l'effet américain. Invoquons-le rapidement ici. Il prend une fonction de flèche comme premier argument. De plus, cela prend en compte une dépendance RA. Mais dans ce cas, nous allons le laisser vide parce que nous voulons que l'effet soit activé. Il n'est donc pas nécessaire de spécifier une variable de dépendance. OK, alors passons à l'immense rave. Mais en haut, nous devons importer la référence d'utilisation en tant qu' université ici. Ne vous inquiétez pas, vous comprendrez certainement l'essentiel. Et bien sûr, nous voulons que cela prenne maintenant. Assignons-le maintenant à une variable appelée pénétrative. Je n'ai pas créé le href. Le nid et la ligne doivent s'en servir. Ensuite, nous devons intégrer tout cela directement dans la balise d'entrée où nous pouvons l'utiliser pour spécifier les attributs href. Nous devons appeler la variable dans Petrov. Le plus simple est finalement d' invoquer la fonction de focalisation sur l'élément d'entrée, n'est-ce pas ? En effet de désuétude, ici même. Invoquons la fonction focus. Et je vais faire dans Peter F point des dieux actuels pour les voitures. Juste comme ça. React définit ainsi la propriété actuelle de Raph sur le nœud DOM correspondant. Voyons ce qui se passe sur un navigateur. Pouvez-vous voir que lorsque le composant est monté, la souris se concentre sur l'entrée affichée. Cette implémentation est très utile lorsque vous créez un formulaire d'inscription. Et vous souhaitez que le premier champ de saisie du formulaire d'inscription soit centré sur le moment où la page se charge. Vous pouvez le voir clairement. Utilisez bien le cours, dans le champ de saisie. Mais lorsque nous retirons le href, faisons un commentaire à ce sujet. Pouvez-vous voir que rien n' a été trouvé dans le champ de saisie. Le champ de saisie n'a donc pas quatre cœurs. Mais lorsque vous implémentez la référence lors du rechargement du navigateur, pouvez-vous voir que le champ de saisie est centré sur ? C'est donc exactement ce que l' utilisateur peut vous aider à réaliser. 52. 50 useRef hameçons: Pour expliquer plus en détail, utilisateur de Hook, configurons rapidement un exemple d'application de minuterie. Alors, d'accord, quand utilisez-vous la pratique des références ? Créons rapidement un nouveau composant appelé timer. Cliquez avec le bouton droit sur nouveau fichier. Point du chronomètre. Générez le composant fonctionnel. Le but de cette conférence est d'implémenter un compteur d'intervalles qui met chaque seconde à afficher la valeur sur le navigateur. Pour ce faire, nous devons d'abord déclarer la variable contenant la valeur de l'intervalle. Donc, tout en haut de la liste des causes, vous devriez savoir comment procéder. Et ici, nous allons déclarer une variable d'état. Et nous allons appeler cela une minuterie. Il suffit donc d'en faire une virgule ici. Et l'état initial sera là. Affichons rapidement la valeur du chronomètre, directement dans les GSA. Je vais utiliser le tag H2. Alors, ici, je vais faire le chronomètre, c'est la nouvelle valeur du coffre-fort. Nous allons le rendre rapidement dans le composant de l'application. Et ici, nous devons importer le chronomètre à partir de Components Slash Users Slash Timer juste en dessous. Faisons le rendu ici. Lorsque vous enregistrez l'application, consultez le navigateur, vous voyez que le minuteur est l'état initial ou la valeur initiale du chronomètre. Revenez au code VS et implémentons rapidement le minuteur. Pour configurer le chronomètre, nous devons l'implémenter directement dans Effect WHO. Donc, en haut, nous devons importer l'effet Hooke. Viens ici. Le hook est une fonction et nous devons ensuite l'invoquer. Cette fonction prend une fonction d'erreur comme premier paramètre et le second paramètre est également un tableau de dépendances. Et dans ce cas, nous allons avoir un tableau de dépendances vide. est donc dans l'effet que la transformation a lieu. Nous allons avoir un intervalle constant, un intervalle fixe égal. Et encore une fois, nous devons intégrer une fonction d'erreur. Donc, directement dans cette fonction, nous devons mettre à jour le chronomètre. Pour ce faire, nous appelons la fonction de configuration d'un chronomètre, juste à côté du chronomètre précédent. Et le précédent Timer Plus , le plus simple qui soit. Et nous voulons qu'ils soient affichés sur le navigateur à chaque seconde. Donc, ici, nous allons placer une virgule ici, puis l'induire ici. Cela fait, nous devons implémenter une fonction de retour pour effacer l'intervalle. Retourner. Ici, je vais faire l'intervalle Claire. Nous devons passer par Java. Lorsque vous enregistrez et quittez le navigateur. Tu peux voir ? Le principal défi de cette conférence est de désactiver le chronomètre lorsque vous cliquez sur le bouton. Implémentons donc rapidement un bateau pour réaliser cette fonctionnalité. Nous devons spécifier le onclick. En cliquant sur ce bouton. Nous voulons désactiver le chronomètre. Très bien, allons-y et voyons comment ça se passe. Nous allons appeler la TVA propre , puis passer l'intervalle. Ici. Dans le test interne, je vais utiliser le chronomètre. Lorsque vous enregistrez et quittez le navigateur. Vous voyez qu'il est dit que l'intervalle n' est pas défini. Tu sais, pourquoi ? Revenez au code VS et laissez-moi vous le montrer. C'est simplement parce que l'intervalle variable est limité localement uniquement à l'effet OMS. Donc, lorsque vous faites cela, l'intervalle ne peut qu' être effacé, n'est-ce pas ? Quel est l'effet qui ? Nous voulons effacer l'intervalle lorsque vous cliquez sur le bouton. Et nous avons immédiatement implémenté le bouton. Regarde ce qui se passe. Il indique que l' intervalle variable dont nous avons parlé ici n'est pas défini. Mais regardez, nous l'avons défini ici à la septième ligne. Cela signifie donc simplement que cet intervalle ne peut être vu que directement dans le crochet d'effets. Pour résoudre ce problème, nous devons faciliter l'utilisation du href, dont la technique est généralement utilisée, pour stocker une valeur mutable qui ne provoque pas de nouveau rendu lors de la mise à jour. Encore une fois, l'utilisateur f est une fonction, nous devons donc l' invoquer comme d'habitude. Mais d'abord, il faut l'importer dans un club. Ici, en haut, nous allons invoquer l'utilisateur F. Maintenant, nous allons faire const, ref en Dava, l'attribuer comme ceci. La prochaine étape consiste donc à remplacer toutes les occurrences de l' intervalle par le point de référence actuel. Viens ici, nous devons effacer cette variable. Ensuite, je vais faire des points d'intervalle. Des données les plus simples et actuelles. N'oubliez pas que nous devons remplacer toutes les occurrences de l'intervalle. Et en voici une qui est transmise à la méthode des intervalles sur argile. Remplacez-le comme ceci. En voici un autre. Lorsque vous enregistrez l'application, désactivons le navigateur. Essayons-le en cliquant sur Déclarer le délai d'attente, en votant. Jette un coup d'œil. Maintenant, nous avons réussi à effacer le chronomètre. Lorsque nous cliquons sur ce tableau, l'intervalle est effacé, puis le chronomètre s'arrête. Il s'agit donc d'un autre problème que l'utilisateur résout. 53. 51 site Web Yum Eat (installation réaction): Dans cette conférence, nous allons commencer à créer le site Web. Et comme d'habitude, nous allons repartir de zéro en installant une nouvelle application React sur le bureau. Créons rapidement un nouveau dossier appelé Yom eats. Le nid et la ligne consistent à glisser-déposer le dossier vers le bas dans le VS Code. Ouvrez donc rapidement le code VS. Faites glisser le dossier dans le VS Code. Maximisons. Ensuite, je vais quitter la page d'exemple. Ouvrez le terminal intégré VS Code. Et je vais faire du thé Control and Bark. Ou vous pouvez le trouver en haut à droite ici, qui est terminal puis nouveau terminal. Nous allons donc utiliser la commande MUX pour créer une nouvelle application React sans avoir à l'installer sur l'application React MP x Dash de notre système. Ensuite, nous voulons l'installer dans un répertoire appelé Klein's. Appuyez sur la touche Entrée pour le faire démarrer. Oh, l' installation de React js est en cours. Et pendant que l' installation est en cours, je souhaite vous présenter un framework d'utilitaires CSS. Ce framework est Tailwind. Le framework Tailwind permet de styliser très facilement votre application. Ensuite, vous pouvez cliquer sur Commencer pour voir comment installer un tailwind initialisé. Voici les conseils pour le faire installés, vous allez faire npm install dash d, tailwind CSA. Et puis si vous voulez initialiser, vous allez utiliser du CSS NP x Tailwind. Il en a besoin. Pour l'instant, nous allons ignorer le CSS Tailwind. Je me concentre sur l'installation de React. React a été installé avec succès. La prochaine étape consiste donc à démarrer le serveur de développement frontal. Dirigez-vous vers le terminal. Tout d'abord, nous devons examiner les réclamations D. Alors je vais faire NPM Starts. Et voici la page d'exemple de React. Très bien, nous avons maintenant terminé d' installer React js. Dans la prochaine conférence, nous allons faire le ménage en supprimant les fichiers inutiles qui ne sont pas nécessaires à cette cause. Ensuite, nous allons créer le composant en fonction l'application que nous allons voir. Rendez-vous à la prochaine conférence. 54. 52 Assiette à l'aide: Très bien, allons-y pour nettoyer les plaques de la chaudière. Cela signifie donc simplement que nous voulons supprimer les fichiers inutiles dont nous n'avons pas besoin pour créer l'application. Ouvrez donc rapidement le client SRC. Ici. Nous n'avons pas besoin du fichier d'installation test.js. Je vais donc appuyer sur la touche de commande de mon clavier, puis appuyer sur la souris pour sélectionner tout en maintenant la touche commande enfoncée Nous voulons sélectionner plusieurs fichiers inutiles. Je vais donc sélectionner le rapport, les vetos Web, le logo point SVG, le point de test js et enfin les CSA à points supérieurs. Cliquez avec le bouton droit Mettons-le rapidement à la poubelle. Et quand cela se produira, vous verrez cette erreur ennuyeuse ici, n'est-ce pas ? Au sein des groupes de terminaux. Nous avons sélectionné le CSS de l'application, mais il semble que quelque chose ne va pas. Je dois donc le supprimer à nouveau car ce n'est pas nécessaire. Ouaip, l'app dot css a disparu. Et s'il vous plaît, ne supprimez pas l'application Js. Très bien, le reste de ces fichiers est donc extrêmement important pour créer notre application. Alors ouvrez l'application, Juifs. Et ici, il se plaint que le logo point SVG n'est pas trouvé. Fais une bêtise. Voici le logo point SVG, puis voici le point css de l'application. Et bien sûr, nous venons de le supprimer. Donc, ce que je vais faire maintenant, c'est surligner 1-2, puis l'effacer. Faites défiler vers le bas. OK, je pense que tout va bien pour le moment. La ligne terminologique suivante consiste à surligner la balise d'en-tête d'ouverture à la balise d'en-tête de fermeture, car nous n'avons besoin d'aucun de ces éléments ici, effacez-la. Commande S pour enregistrer un tout indéterminé. Il indique que le rapport ne contient pas non plus de données vitales. Et c'est ici que vous pouvez le trouver. Point d'index. Ici. Tout d'abord, nous devons supprimer les entrées des lignes 5. Cela fait, il a été appelé ici. Nous devons également le supprimer. Maintenant, je pense que notre application serait bien. Consultez rapidement le navigateur et voyons le résultat final. Maintenant, nous avons un écran vide, donc c'est exactement la fin attendue. Dans la prochaine conférence, nous créerons nos composants en nous basant sur les observations du projet Yom. À bientôt. 55. 53 Créer des composants: Avant de créer les composants, il est extrêmement important d'observer le site Web afin de comprendre comment il a été consulté. Grandissons vite. Jette un coup d'œil. Ce design est fantastique, croyez-moi. Très bien, alors commençons. Maintenant, lorsque vous regardez l'écran, vous vous rendrez compte que nous avons le composant de navigation, baignoire, juste ici, qui inclut le Young, son logo ici, le lot de livraison gratuite. Et au centre, nous avons le champ de recherche. Sur le côté droit de l'écran. Nous avons aussi les cartes, oui, ici, nous avons l'icône pour activer la navigation. Lorsque vous cliquez. Tu peux voir ça ? Belle ? Et nous avons également l'icône X pour les indices. Juste en dessous des principaux composants de navigation, vous allez voir la société phare dont vous trouverez la magnifique diapositive ici. Tu peux voir ? Et juste en dessous du composant héros, nous avons les composants de livraison rapide. Ci-dessous, nous avons également les principaux composants de pointe. Avec ce magnifique slider à afficher, vous allez l'adorer. Et ci-dessous, nous avons le composant du moulin. Et voici la composante des catégories de tendances. Et voici les composants de la newsletter. Juste en dessous se trouve le composant alimentaire. Nous avons maintenant réussi à décomposer l'application en un segment encapsulé plus petit appelé composants. Passons donc à VS Code, créons ces composants. Laissons cela vers le bas pendant un moment. Lorsque le SRC, comme celui-ci, crée un nouveau dossier appelé composants. Donc, directement dans ce répertoire, nous allons créer les fleurs et, bien sûr, nous avons le composant Top Nav. Je vais utiliser le point G de navigation supérieur. Et jusqu'au sommet. Nous avons maintenant le composant héros, ou nous pouvons tout aussi bien l'appeler le futur composant objet. Je pense que ça sonne mieux. Je vais donc faire quelques points pour enfants, des plaisanteries. Et après cela, nous avons la livraison rapide. Nous avons le composant Top Picks, le composant meal, meal ab.js, les catégories tendances, et je vais l'appeler categories point js. Nous avons la composante newsletter. Enfin, les composants alimentaires. Donc, ce li explique comment créer une application comme un pro. Lorsque vous observez l'application, la première chose à faire est de décomposer le site Web en segments encapsulés plus petits appelés composants. Et bien sûr, vous devez maintenant savoir que ce composant est la pierre angulaire de chaque application React. Après avoir créé tous les composants, lors de la prochaine conférence, nous procéderons à l' installation de PTI wind. 56. Installation à queue: Passons à l'installation et à la configuration de Tailwind. Appuie sur le bouton Commencer. Voici les conseils. Donc, d'abord, nous allons installer Dash D, Tailwind CSA. Je vais donc simplement cliquer ici pour copier. Retournez à VS Code Terminal et assurez-vous que vous êtes dans le répertoire client. Collez-le ici, et sera utilisé pour initialiser le vent arrière. Laissez-moi vous montrer ici, n'est-ce pas ? Ainsi, lorsque vous cliquez sur cette icône Copier, nous allons copier le stand de la commande. Actionnez donc rapidement la touche Entrée pour l'installer en feu ou en vent arrière, soustrayez de la forme. Allons y jeter un œil. Par ici. Je vais presser les composants. Ouvrons le fichier package.json. Et lorsque vous faites défiler la page vers le bas, voici le Tailwind. Parfait. Donc, ici, vous allez voir le fichier de configuration Tailwind point. Revenez à la section « Conseillez au nid les copier ici et collez-les dans le tableau des contenus. Donc, ce que je vais faire maintenant, c'est revenir au bureau ouvert. Et vous allez trouver ici les matériaux ou les matières alimentaires. Ouvrez le code **** power. Je vais maintenant copier ce module ici. Je vais donc surligner ma parabole, puis la remplacer. Enregistrer. La ligne suivante consiste donc à suivre ces conseils, à les surligner, puis à les copier. Ou vous pouvez cliquer sur cette icône ici pour copier. Revenez, ouvrez le point d' index CSA surligné, effacez-le, puis collez-le ici. Cela étant fait, nous avons réussi à mettre en place le Tailwind. Maintenant, je veux créer un CSS de base pour le nautisme. D'accord, il ressemblera davantage au CSS global afin que toutes les protéines de que toutes les protéines de l'abrogation suivent le même modèle. Et la façon dont nous le faisons est d'ajouter une couche de base. Ensuite, nous allons avoir ici en bas, à droite, nous sommes en bas. Je vais m'inscrire. Nous allons donc appliquer le style storyboard up. J'ai acheté un trait arrondi x L. Donc, en fait, nous appliquons simplement le rayon de bordure au bateau. D'accord, donc nos protéines vont être un peu courbées. Et maintenant, nous voulons appliquer un rembourrage à partir de l'axe X. Donc je vais faire p x. Cela implique en fait le rembourrage de gauche à droite, d'accord ? Alors, quel est l'axe X ? Et je vais le faire en cinq pixels. Le PY représente donc le rembourrage en haut et en bas. Donc, en haut et en bas, nous allons en avoir un rembourré. Cela créera donc de l'espace en haut en bas et en bas. C'est aussi simple que cela. Et bien sûr, si vous vous demandez pourquoi j'ai tous ces détails ici, c'est simplement parce que j'ai installé une extension très intelligente appelée tailwind IntelliSense. Alors laissez-moi vous montrer comment procéder dès maintenant. Ouvrez l'extension, puis nous allons configurer notre vent IntelliSense ici. Est-ce de mon côté ? Je l'ai déjà installé. Donc, ce que vous allez faire de votre côté, c'est appuyer sur le bouton d'installation. Juste là. Vous allez voir installer au lieu de désinstaller. Cliquez sur le bouton d' installation à la fin pour installer cette puissante extension. C'est en effet une tension très puissante et cela va certainement être utile. OK, ferme-le. Et maintenant, quand je passe la souris sur la classe, maintenant, comme ça, vous allez voir l'équivalent CSS. Donc, en gros, ce que nous avons fait ici est d'appliquer le rayon de bordure à 0,75 rem. Et ici, le motif restant est de 1,25 rem. Le schéma de droite est de 1,25 rem. Lorsque vous passez la souris dessus, encore une fois, le haut du motif est de 0,25 rem et le bas du rembourrage est de 0,25 rem. C'est donc simplement parce que j'ai installé une extension très puissante appelée tailwind IntelliSense. Cela vous donnera donc l'équivalent CSS du Tailwind. Et cela se produit lorsque vous passez la souris sur les classes d'utilitaires. Par exemple, je passe la souris sur cette classe ici. Pouvez-vous voir que ce que nous avons simplement fait ici est d'implémenter la couleur de la bordure et, dans ce cas, c'est le noir. C'est éteint maintenant. Et lors de la prochaine conférence, nous commencerons à travailler sur l'étudiant Top Nav. 57. 55 Composante TopNav: Dans cette conférence, nous allons aborder le composant Top Nav. Et c'est ici que le plaisir commence. Donc, commandez correctement le package de composants. Ouvrons le Tata J's en haut à gauche. Pour l'instant. Arrêtons le terminal, puis commande B pour fermer l'Explorateur. Nos ADC pour générer les React js sont des composants fonctionnels. Parfait. Affichons rapidement ce composant directement dans la commande P de l'application Jeers pour faire apparaître ce petit champ de recherche en haut. Et je vais faire en sorte que G soit ouvert. Donc, directement dans le div avec le nom de classe AB, nous allons maintenant afficher le haut, fermer avec la balise à fermeture automatique et la charge technique. Le dessus est désormais importé automatiquement dans une baignoire. Donc, si vous vous demandez comment procéder, accord, repartons de zéro, effaçons. Et je vais faire Top Nav à partir d'une barre oblique, des composants et une barre de navigation supérieure. C'est aussi simple que cela. Revenons au composant Top Nav. Très bien, nous allons donc donner un nom de classe à ce div. Ensuite, nous allons spécifier la largeur maximale. Faisons une marge de 15 ou 20 à partir de la gauche et de la droite. Faisons en sorte que ce soit automatique. Et nous allons le faire afficher, adapter, justifier le contenu, en laissant un espace entre les deux. Ensuite, nous allons aligner les éléments pour centrer le rembourrage. Nous allons faire en sorte que ce soit le plus simple qui soit. Je sais que quelqu'un est curieux de connaître tous ces termes, car certains d'entre vous, ce sera midi, mais imprudents. Après mon explication géniale, vous la comprendrez certainement assez bien. Donc, ce qui se passe ici, c'est qu'on nous donne cette division, une largeur maximale de 15, 20. Et prenez des notes, voici comment spécifier une valeur personnalisée. Je peux donc effacer cela comme ça, puis vous pouvez spécifier la valeur réelle de la classe. Mais si vous souhaitez spécifier une valeur personnalisée, vous allez ouvrir le bloc comme ceci, puis faire 15, 20. Ainsi, lorsque je passe la souris sur la classe en ce moment, elle affichera l'équivalent CSS réel qui fonctionne en arrière-plan. Permettez-moi de vous montrer, je l' espère, la largeur maximale, alors ici, nous avons une largeur maximale de 15, 20. Quand je passe la souris sur le MX Auto. Pouvez-vous voir ici que nous avons la marge gauche pour être automatique et la marge droite pour être automatique. Le MX implique donc simplement une marge sur l'axe X, c' est-à-dire qu'une actrice dit marge de gauche à droite. Et nous l'avons ici Display Flex. Et je sais que vous ne vous étonnerez pas que nous n'ayons pas mentionné l' affichage ici. Mais lorsque vous passez la souris sur le flux de classe, vous verrez Display Flex. Et justifiez ici l'espace de contenu entre les deux. Laisse-moi te montrer. Pouvez-vous constater que vous justifiez l'espace entre les éléments et que vous les alignez au centre ? Le rembourrage ne fait qu'une seule règle. Grâce à la simplicité de cette explication, je sais que vous la comprendrez mieux dès maintenant. Alors allons-y. Le nerf supérieur est divisé en trois endroits. Nous avons le côté gauche, le centre et le côté droit. Donc, le côté gauche, je vais vous le montrer rapidement. Ici. Sur le côté gauche, nous avons le hamburger, le jeune, son logo et la livraison gratuite. Et au centre, nous avons le champ de recherche. Dans le coin supérieur droit, nous avons les cartes. Travaillons donc sur le côté gauche. Nous allons avoir un div ici avec le nom de la classe et écrire en portant le nom de la classe, nous allons avoir un affichage flexible, aligner les éléments, centrer. Les gars. Une chose que je tiens vraiment à vous faire remarquer, c'est que le vent arrière a mêlé Eileen, très facilement. Honnêtement, à la fin de ce cours, vous aurez toujours envie d' utiliser Tailwind, croyez-moi. Nous allons maintenant avoir un autre div avec le nom de classe du pointeur de connaissance causale. Bien, dans ce div, nous allons afficher l'icône. Et puis pour cela, nous devons installer l'icône React. Et maintenant je vais le faire. Npm installe les icônes React Dash. Juste comme ça. Cétone, la touche Entrée. Très bien, les icônes React sont donc installées, soustraient, tombent. Je veux dire, bien sûr, vous ouvrez le fichier package.json et le voici. Ferme-le. Donc, directement dans ce div, nous allons afficher une icône appelée menu surligné. Mais avant cela, nous devons d'abord l'importer à partir des icônes React. Je vais donc faire des importations. J'ai décrit le menu à partir de la barre oblique des icônes React. Nous avons deux suffixes avec AI. Parce qu'ici, nous le préfixons avec IA et ensuite nous devons le faire apparaître ici avec un colorant. Toutes les icônes liées à l'IA seront donc importées ici. Cool. Je suppose donc que nous devrions le faire dès maintenant afin de ne pas perdre de temps à le faire à l' avenir. Voilà, je vais le faire. J'ai esquissé des indices si calmes. L'icône de fermeture du menu. Laisse-moi te montrer rapidement ce type. Voici donc le gars que nous venons d'importer, qui est le menu hors ligne de l'IA. Et voici les grandes lignes, ce gars, je sais que vous comprenez tous ces onglets. Et enfin, l'étiquette de champ. Tous ces sommets sont donc préfixés par IA. Et c'est pourquoi nous l' avons recouvert d'un joli. Maintenant, exécutons le menu que j'ai décrit. Donnons-lui une taille. Je dis 25. Sûr. À partir de là, nous allons lancer npm pour démarrer le projet et nous assurer que vous affichez ce composant directement dans l'application. Oups, désolé les gars, il y a une erreur dans la commande. Je pense donc que cela fonctionnera cette fois. le coin supérieur gauche de l'écran, vous allez voir le menu de plan. Et cette icône sera utilisée pour activer le tirage latéral. Juste après le div de clôture. Nous allons avoir une étiquette sur la tête et je vais dire que ces droits étaient réservés à l'hippodrome. Nous allons recevoir un spam. Spam. Je vais manger. Donnons-lui donc un style ClassName, test, tiret à Excel. Nous spécifions donc essentiellement le style du formulaire. Et lorsque vous passez la souris sur la classe, elle vous montre l'équivalent CSS qui fonctionne en arrière-plan. Et s'il vous plaît, lorsque vous appliquez des styles avec Tailwind, vous n'avez pas besoin d'aller au-delà de la citation. Donc, tout ce que tu vas faire sera conforme aux codes. Ça a l'air bien, non ? Magnifique. Sur un appareil plus petit que m, nous voulons que le test apparaisse sous forme Excel. Donc, en gros, nous implémentons le point d'arrêt ici. Ainsi, sur un écran plus grand, le test apparaîtra pour Excel, aussi simple que cela. Alors ici, les rembourrages à gauche et à droite seront deux. Donc, lorsque vous économiserez, retournez au Brésil. Laisse-moi te montrer. Maintenant. Quand je presse, vous voyez que le test devient plus petit. Ainsi, lorsque vous augmentez à un moment donné, ce test devient de plus en plus grand. Ce sera donc un appareil grand, moyen et plus petit. Observez-le à nouveau une fois de plus. Donc, sur un appareil plus petit, le test ressemble à ceci. Sur Medium, la taille de police va augmenter. Vous pouvez voir que sur un appareil plus grand, cela va augmenter. Encore une fois. Jette un coup d'œil. Profit Guys. Je pense donc que le vent arrière est extrêmement génial et qu'il facilite le travail. Bien. Donc, juste après le headtag de fermeture, nous allons avoir un div. Donnons-lui un nom de classe. Et bien, au sein de la classe, nous allons la styliser en appelant les classes utilitaires dans Tailwind. C'est du moins ainsi que fonctionne Tailwind. Nous allons donc le faire chauffer sur un appareil plus petit. OK, donc sur un grand écran, fléchissez normalement, alignez les éléments au centre. La couleur de fond va être grise. Spécifions-lui donc un nombre pour qu'il soit réellement ajouté. Dois-je voir l'épaisseur de la couleur ou quelque chose comme ça ? Ensuite, nous voulons qu'il soit arrondi. Une course qui va être pleine. Donc, le rembourrage va en être un. Les tests. Faisons 14 pixels. Et s'il vous plaît, ici, nous devons également ajouter un pixel comme celui-ci. Hey, passez la souris dessus et jetez-y un œil. Maintenant, nous avons une largeur maximale de 15 ou 20 pixels, fermez le diff. Alors maintenant, laissez-moi vous expliquer ce qui se passe. Donc, ici, nous allons avoir un tag P, et je vais en faire trois. Un autre tag P ici, un doublon. Et nous allons avoir une livraison comme celle-ci. Donc, sous un appareil plus petit, nous ne voulons pas voir ce gars, c'est bien, mais sur un écran plus grand, nous voulons le voir ici. D'accord, laissez-moi vous montrer rapidement quand vous enregistrez sur le navigateur. C'est ici ? Donc, quand je rétrécis l'écran, voyons voir, pouvez-vous voir que sur un appareil plus petit, il disparaît. Mais lorsque vous passez à un écran plus grand, nous devrions être en mesure de voir que tout semble réactif. Et bien sûr, je vous serais très reconnaissante si vous pouviez également évaluer et examiner ces appels. Partagez ce coût avec vos amis , car cela vous sera utile. Alors dialysons la balise p gratuitement, je vais faire ClassName. La couleur de fond est G, orange, tiret 700 parce que pour les femmes, l'épaisseur de la couleur orange est vraiment très bonne. La couleur du test sera le blanc. Les tests se terminent en blanc. L'arrière-plan va être arrondi, idiot. Le rembourrage est à l'épreuve. Nous voulions monter à bord. Et t'inquiète, je vais expliquer tout ça dans un GPA. Et là encore, donnons-lui un nom de classe. Le rembourrage sera soumis à cette épreuve, il sera courbé. Enregistrer. Et voyons ce que nous avons sur le navigateur. Jette un coup d'œil. Tu peux voir ça ? Nous avons maintenant le logo et la livraison gratuite dans un état très parfait. Je les ai adorés. Maintenant, laissez-moi vous expliquer ce qui se passe sous le capot. Ici, nous avons un ClassName et sur un appareil plus petit, nous allons masquer toutes ces balises p. Mais sur un écran plus grand, nous voulons qu'il affiche les éléments à alignement flexible pour les centrer. L'arrière-plan des formulaires va être excellent. Le pied arrondi va donc faire du poêle une sorte de laïque. Laisse-moi te montrer tout ça ici. Et lorsque vous passez la souris dessus, le rayon de bordure est de 999 pixels, ce qui peut en fait être de 100 %. Et le rembourrage est de 0,2. Le test Rem indique que 14 pixels sont corrects. Nous en avons maintenant terminé avec le côté gauche. Passons à la barre de recherche au centre. Juste après le div de clôture. Nous allons avoir un autre div avec le nom de la classe. Nous allons lui donner une couleur de fond gris en pointillés 200. Donc, cela indiquerait la valeur du gris, accord, à quel point il apparaîtra grisâtre. Des trucs comme ça. Nourriture arrondie. Donc, maintenant, vous devriez comprendre tout cela. Affichez la flexion, alignez les éléments, centre, le motif à partir de l'axe X, ce qui implique la gauche et la droite. On va en faire deux. Et puis la largeur, nous aurons notre propre largeur personnalisée. Donc, chaque fois que vous faites quelque chose comme ça, cela signifie que vous voulez implémenter votre propre type de choses personnalisées, par exemple le rembourrage gauche et droit, je peux décider de le faire comme ça d'une manière personnalisée que je peux faire pour avoir des photos. Lorsque vous passez la souris dessus comme ça, vous voyez, mais à gauche. Donc, si les pixels se complètent correctement, il y a des pixels, mais je décide de ne pas le faire. Je vais le garder comme ça. Ainsi, chaque fois que vous souhaitez avoir votre propre style personnalisé, vous pouvez utiliser le crochet. Maintenant, le rembourrage à gauche correspond au bouton 0,5 rem, à droite à 0,5 rem. Donc, la largeur est de 200 pixels. Sur un appareil plus petit, la largeur sera de 100 pixels. Sur un appareil de grande taille, la largeur sera de 500 pixels. Oups, jetez un œil. Agréable. Fermons le div. Juste ici. Nous allons avoir le plan, souvenez-vous que nous l'avons importé de Riyad. Icônes. Il suffit de surligner et de copier. Et ici, je vais le rendre de plus près à la fois avec l'étiquette à fermeture automatique, lui donnant une taille de 25. Enregistrez, consultez le navigateur. Maintenant, tu peux voir, laisse-moi te montrer. C'est ici ? Mais le problème est maintenant qu'il a été aligné sur le coin supérieur droit de l'écran. Nous trouverons donc un moyen de l' aligner au centre. Encore une fois, juste dans la division. Nous allons avoir une balise d'entrée avec un nom de classe, puis la couleur d'arrière-plan sera. Transparent, tiret P T2. Bien sûr, tu sais ce que c'est. La largeur va être stupide. Cela indiquera en fait 100 % de la largeur. Sortons-le. Jette un coup d'œil. Pouvez-vous voir que lorsque vous passez la souris sur la classe, vous verrez le CSS réel qui s'exécute en arrière-plan. Et il est dit que la largeur est de 100 %. Et s'il vous plaît, si toute cette barre ne fonctionne pas pour vous, c'est simplement parce que vous n'avez pas installé le Tailwind IntelliSense. Assurez-vous donc de passer aux extensions. Installez ensuite Tailwind Intelligence. Ça l'a. Très bien, très bien. Et d'ailleurs, je vous ai appris à le faire lors la conférence précédente. Continuons. Donc, pour ce qui est des grandes lignes, laissez-moi vous montrer quelque chose avant de le faire. Enregistrer. OK, fermons-le comme ça dans le navigateur. C'est ici ? Pouvez-vous voir que lorsque je place ma souris juste à l'intérieur de la balise d' entrée, vous allez voir ce contour. C'est donc ce que nous ne voulons pas. Quand je clique dessus, tu vois qu'il a disparu. Et puis quand je clique dessus, vous verrez le plan. Enlevons-le rapidement. Je vais donc faire le point sur les grandes lignes. Cela va être connu. Enregistrez Jakarta, le navigateur. Lorsque vous cliquez dessus, vous voyez qu'il a disparu. Parfait. OK, je pense que nous devrions le fermer avec l'étiquette à fermeture automatique. Cela rend le code un peu plus clair. Et bon, nous allons faire en sorte que le type d'entrée soit un espace réservé à un test rapide. Ces repas, lorsque vous les enregistrez dans le navigateur, pouvez-vous voir les repas prédéfinis ? Et voici l'icône que nous louons là-bas, qui est l'icône de recherche hiérarchique. Nous devons mettre en œuvre les coupes budgétaires. Donc, juste après la fin de la plongée, nous allons faire une promenade en bateau. Donnez le nom du cluster à styliser G, tiret, orange, tiret 700. Cela aidera donc les riches, pour qui la couleur paraîtra plus épaisse ou quelque chose comme ça. Le test sera blanc. Nous voulons qu'il soit caché directement, dans un appareil plus petit, puis dans un appareil de taille moyenne comme l'iPad. D'accord ? Nous allons aligner les éléments au centre. Le rembourrage supérieur et inférieur. Trop. Arrondi. Nous allons le faire fonctionner de cette manière directement dans le corps. Et je vais créer des cartes lorsque vous enregistrerez et que vous consulterez le navigateur. Et maintenant, nous avons réussi à pousser le champ de recherche un peu vers le centre. Ensuite, la découpe est alignée sur le coin supérieur droit de l'écran. Le nid et le citron vert servent à ajouter l'icône coupée directement dans le corps. Comment faisons-nous cela en ce moment ? OK, je vais le faire ici, nous allons utiliser le carburant de la carte carburant. Allez en haut de la page. Nous devons également saisir ce champ de saisie, couper le champ. Et s'il vous plaît, ne me demandez pas d'où viennent tous ces noms. Nous allons donc l'importer à partir des icônes React Dash. Ensuite, nous allons le faire apparaître avec des BA. Importons donc rapidement toutes les icônes qui se trouvent sous BAs. Et je suppose que c'en est une de plus. Hé, je vais faire du BS Person. C'est aussi simple que cela. Hein ? Nous sommes au bas de l'échelle. Nous allons transformer le carburant BS, couper le carburant de plus près grâce à l'étiquette à fermeture automatique. Ensuite, nous allons spécifier la taille. Juste comme ça. Enregistrez dans le navigateur. Vous pouvez ainsi voir que tout apparaît comme prévu. Alors laisse-moi te montrer. Maintenant, lorsque je réduis l'écran, permettez-moi de le presser vers le bas pour chauffer un point d'arrêt particulier. Vous voyez, pouvez-vous le voir sur un appareil plus petit, nous ne voulons pas qu'il apparaisse. Maintenant, le chat semble bon. Nous atteignons réellement nos objectifs, et c'est très bien. Le terme suivant est donc de mettre en œuvre le tirage latéral. Ainsi, lorsque je clique sur ce bouton, le tirage disparaîtra. Et quand je clique sur l'icône, ils dessinent également. Nous allons fermer. Faisons-le lors de la prochaine conférence. 58. 56 Side Nav: L'intention est donc de cliquer sur le menu des hamburgers pour ouvrir la navigation latérale. Mais pour l'instant, lorsque vous cliquez dessus, rien ne se passe. Tu peux voir plus haut, non ? Ajoutons-le rapidement au code VS pour implémenter de telles fonctionnalités. Pour continuer, nous devons d'abord déclarer la variable d'état nécessaire à utiliser. Je vais donc faire assez de choses, plus calmement maintenant, acquérir l'État américain. Et ce sera une opération booléenne. L'état initial va donc être faux. Bien, une fois cela fait, implémentons rapidement cette icône ici. Alors, où l'avons-nous ? Voici, qui est le menu détaillé de l'IA. Ensuite, nous allons l'implémenter sur ce wrapper div pour le menu principal. Nous allons spécifier onclick. En cliquant sur cette icône. Nous voulons ouvrir la fenêtre maintenant, d'accord, donc en gros, cela fait passer l'état de faux à vrai ou de faux à vrai et de faux à vrai. Laissez-moi vous montrer rapidement. Nous allons maintenant appeler la fonction de configuration pour mettre à jour l'état initial. Et ce sera un système de navigation latérale réglé. Je ne vais pas citer assez. OK, alors cliquez sur l'icône ici. Il va passer de l'état initial à l'état forcé lorsque vous cliquez à nouveau dessus, il va le faire passer à l'état final. Permettez-moi de vous montrer ce que je veux dire par ce côté console.log. Maintenant, lorsque vous dites ventricule au navigateur, assurez-vous que l'application est déjà en cours d'exécution. Juste ici. Oups, il est dit que le côté actuel n'est pas défini. C'est là que réside le problème. Il y a une erreur typographique ici. C'est censé être constant, et je sais que certains d'entre vous peuvent rapidement détecter cette erreur corriger de votre côté en enregistrant le navigateur ou en utilisant la commande I pour ouvrir la console. Maintenant, quand je clique sur le menu, cela va changer l'état initial, le vrai. Maintenant, l'état initial devient vrai lorsque je clique à nouveau sur le menu, cela va changer la force. Donc, en gros, nous passons du faux au vrai ou du faux au vrai. Bien. Continuons. OK, donc, le nid et l' apprentissage consistent à créer une superposition d'arrière-plan, car nous voulons tout apparaisse de manière professionnelle. Donc, juste après son achat, nous aurons un autre div ClassName. Ensuite, je vais lui donner une couleur de fond noire, puis diviser le noir par 60 et t'inquiètes, tu verras certainement le résultat. La position va être fixe, la largeur, mettons-la à 100 %, c'est-à-dire pleine. L'écran frontal. Le z-index parce que nous voulons qu'il apparaisse en haut. OK, ça va être enregistré en tant que superposition. Nous devons donc spécifier l'indice Z. Le stylet en haut représente zéro et en partant de la gauche, la flèche. Fermez le DV lorsque vous enregistrez le navigateur. Maintenant, voici le résultat. Ne vous inquiétez pas, nous allons le contrôler. Nous allons donc le contrôler en posant une condition. Donc, lorsque cela est suffisant, nous voulons afficher la superposition. Maintenant. Nous ne voulons rien afficher, ce qui implique simplement que lorsque nous cliquons sur le menu hamburger de cette manière, nous voulons afficher la superposition. Ainsi, lorsque vous cliquez sur le menu hamburger, nous allons afficher le reste. Nous n'allons pas l'afficher. Laissez-moi vous montrer rapidement. Passons maintenant à l'écriture de JavaScript. En Jésus, nous devons ouvrir le crochet bouclé. Alors je vais le faire si la nervosité soudaine est vraie. Nous voulons montrer ici ce DVD, où se trouvent les points forts de la superposition. Coupez-le, puis ouvrez les parenthèses car nous nous attendons à une mise en page de l'interface utilisateur, collée une autre comme celle-ci. Nous n'allons rien montrer. Enregistrez et voyons si cela fonctionne. Rechargez. Tu peux voir ? Donc, quand je clique, cela apparaît exactement comme la façon d'imposer une condition à l'inquiétude excessive que tout est sur le inquiétude excessive que tout est point de prendre forme en ce qui concerne le sommet maintenant. Très bien, la prochaine étape consiste à créer la navigation latérale elle-même. Donc, ici, nous allons avoir un div avec le nom de la classe et écrire dans lequel le nom du cluster devra le styliser. Donc, ici, le chiffre d' affaires a oscillé depuis le haut, zéro, depuis la gauche, zéro. La largeur sera, spécifions une largeur personnalisée, de 300 pixels. Écran. Donc, si nous appuyons sur l'écran, cela signifie simplement que la hauteur est de 100. Peu de hauteurs. Jette un coup d'œil. Bg va être blanc, ce qui est l'arrière-plan. Le z-index est dix. Nous voulons donc qu'il s'anime à l'intérieur et à l'extérieur. Donc pour cela, précisez la durée. Et allons-en à 300. Nous pouvons le porter à 200 lorsque vous enregistrez sur le navigateur. Le voici. Vous pouvez voir que cela a déjà pris forme, mais pour le moment, il semble que c'est fixé à l'écran. Il n'est pas déplaçable. Tu vois ? OK, passons à autre chose. Laisse-moi te montrer. Alors, euh, faisons quelque chose de très sympa. Passons au tirage au sort. Donc, ici, nous allons avoir un crochet bouclé qui s'ouvre et se ferme. Donc, si la navigation latérale est vraie, nous voulons montrer cette vignette ici, surligner et la couper. Viens ici. D'accord ? Si la navigation latérale est vraie, nous voulons afficher ce tau. D'accord ? Surlignez et copiez également, mais nous allons maintenant modifier le style. Rose. Faisons-le comme ça. Le format, le code. Bien. Maintenant, laissez-moi vous expliquer soigneusement ce qui se passe ici. Donc, si la navigation latérale est vraie, laissez-moi vous montrer l'état initial ici. Si c'est vrai, nous voulons qu'il apparaisse à partir du zéro pixel gauche. Ensuite, nous allons spécifier la largeur de 300 pixels. Sinon, si c'est faux, nous voulons que cela aille dans une direction négative. Laisse-moi te montrer. Nous allons donc spécifier ici le tiret gauche. Nous allons avoir une valeur personnalisée. Et je vais le faire à 100 %, déplaçant la barre latérale dans une direction négative vers l'axe X, cachant de l'écran. Sûr sur le navigateur. OK, laisse-moi voir quelque chose ici. OK, changeons-le en vrai. Rien ne se passe. Tout est correct ici. Bon, les gars, changeons le 200, qui est la durée. Passons à 300. Ok, les gars, ça va marcher. Lorsque vous le modifiez en faux. Enregistrer. Tu peux le voir disparaître ? Quand le changerez-vous en vrai ? Cela apparaît. Pouvez-vous voir depuis la gauche lorsque l'état initial de la navigation latérale est défini sur true, le tiroir de navigation apparaîtra à partir de zéro pixel de gauche, puis la largeur sera de 200 pixels. Mais si l'état initial du côté est maintenant défini sur faux, partant de la gauche, il deviendra négatif à 100 %. D'accord ? Et en cachant ce côté, dessine le plus simple qui soit. Commençons maintenant à implémenter les icônes du menu, à droite, en les portant sur le côté maintenant. Faisons-le donc lors de la prochaine conférence. 59. 57: Bon retour à tous. Dans cette conférence, nous allons donc implémenter les menus directement dans le dessin. OK, donc la première chose que nous allons faire est d'implémenter une icône qui sera utilisée pour fermer le dessin latéral. Faisons-le rapidement. Alors c'est vrai, nous sommes dans le DV. Laissez-moi vous montrer ceci, le DVD ici, comme celui-ci, juste à l'intérieur. Nous allons afficher l'icône de fermeture du plan. Laisse-moi voir. Le voici. Nous l'avons importé lors de la conférence précédente. Copie. Descendez. Allumons la diode ici. Plus près avec l'étiquette à fermeture automatique. La taille, bien sûr, sera de 25. Enregistrez dans le navigateur. C'est ici ? Mais nous ne le voulons pas dans le coin supérieur gauche. Les femmes doivent donc être alignées dans le coin supérieur droit, juste dans le tiroir de navigation. Pour l'instant, je ne pense pas que le style soit quelque chose de difficile, alors rends-le cliquable. Pour l'instant. Ici, je vais spécifier l'icône onclick onclick. Nous voulons également faire passer l'état initial de faux à vrai, comme nous l'avons fait dans la conférence précédente. Laissez-moi vous montrer exactement ce que nous avons fait ici. Je pense donc que je dois juste copier le onclick comme ceci. Collez-le ici. Formatons le code. Magnifique. Enregistrez dans le navigateur. Cliquez sur Pouvez-vous voir, puis cliquez dessus pour ouvrir. Ces deux-là se rapprochent. Très bien, stylisons rapidement l'icône de fermeture et alignons-la correctement. Nous allons le placer en position absolue. Laisse-moi te montrer. Tu vois. Bien. Puis, à partir de la droite, faisons quatre. Du haut. Faisons en quatre. Ensuite, le coût sera indiqué. Enregistrer. Et maintenant, le voici. Fermez, ouvrez, fermez, ouvrez. J'espère maintenant que vous comprenez assez bien comment nous avons obtenu ces résultats. Si vous ne le comprenez pas pour la première fois, je vous conseille de recommencer les conférences afin de vous faire une idée claire de ce dont nous parlons. Voyons les actualités adaptées aux mobiles. Vous le verrez sur iPhone. Prenons l'exemple de l'iPhone 12. Jette un coup d'œil. Tout est cool. Implémentons donc les menus ici, et c'est extrêmement simple. C'est aussi simple qu'ABC. Donc, après l'icône, nous allons avoir ici une haie à étiqueter. Le rembourrage sert à lire la balise H2. Nous allons le faire comme nous l'avons fait lors de la conférence précédente. Ensuite, nous aurons une durée. Une travée. Je vais manger. Dialysons la durée. Orange 700. Et le voici. Une chose que j'aime faire, c'est la police de caractères. Pouvez-vous voir maintenant que la balise span devient extrêmement courbée. Bien. Donc, juste après la balise H2, nous allons avoir un nœud juste dans la navigation. Nous allons avoir une liste non ordonnée, UL. Donnons-lui un style. Faisons en sorte qu'il affiche la colonne Flex et la colonne Flex Direction. Le rembourrage est destiné au test. Gris 900. Cool. Ne serait-ce pas l'UL, nous aurons les balises LI, ce qui est le minimum. Ensuite, donnez-lui un nom de classe, stylez-le au sein de la classe en tenant compte des classes utilitaires présentes juste là et de Tailwind. Et je fais partie de la classe Test Dash Excel, PUI, qui se trouve en haut et en bas. Ensuite, nous allons avoir un écran flexible. C'est aussi simple que cela. Donc, directement dans la balise LI, nous allons afficher le BS Pearson, qui est cette icône ici. La taille 25, donnez-lui un nom de classe pour la styliser. Alors, la marge, n'est-ce pas ? Qui sera juste M. pour qui le sens de l'actrice sera un bélier. Laissez-moi vous montrer comment générer une RAM. Et puis le test. Blancs. La couleur de fond est le noir. Rond, imbécile. Cela aidera en fait à réduire la frontière, économiser. Et voyons voir. Bien. Tu peux voir ça ? Maintenant, nous avons ce gars ici et vous devez faire mes comptes. Donc, juste dans la balise LI, lorsque vous enregistrez, elle apparaît comme suit. Génial. Tout fonctionne comme prévu. Tu vois plus haut, non ? Donc, ce que je vais faire maintenant, c'est mettre en évidence le tag LI comme ceci. Et puis dupliquez-le quatre fois, 1234. Vous pouvez également copier et coller quatre fois. Donc, ce que nous devons faire maintenant, c'est changer les icônes et l'étiquette est assez simple à faire. Juste ici. Cette icône sera CB Truck Return. Et bien sûr, nous devrions les importer depuis l'icône de Riyad. Je pense que nous devrions le faire comme avant. Nous allons importer toutes les icônes nécessaires afin de ne pas avoir à revenir ici pour le faire à nouveau. Ici. Nous allons importer, nous allons importer FA, utilisateurs Friends, FE, Google Wallet. Vous pouvez décider d'utiliser une autre icône. C'est juste ton choix. OK. Je pense que nous devons dupliquer cela parce que je n' ai plus à taper à partir de zéro. Alors les gars, notez que nous avons préfixé toutes les icônes ici avec FE. Nous allons donc fixer sa largeur. La même chose ici. Nous le préfixons avec TB, nous devons donc le corriger avec TB. C'est la seule façon dont cela fonctionne. Puis il m'a demandé comment cela fonctionnait parce que je ne sais pas. Nous allons donc importer de l'aide vide, plus calmement. Moi, j'ai décrit la fièvre, non ? Oups, le plan devrait être ici, en majuscule 0. Passez en revue votre poêle et assurez-vous que toute l'entrée est correcte. OK. Commençons maintenant à l'utiliser. Ici, nous avons le retour du camion TB. Et ce sera une livraison. Beaucoup économisent et passent à la caisse. Le tirage latéral. Pouvez-vous voir ici que nous avons une livraison. Et lorsque vous zoomez, vous verrez les boules ici. Très bien, nous devons donc changer. Le reste de ce gars est que la liste est vide de favoris soulignés. Ici. F8, portefeuilles Google. Oups, c'est censé être un portefeuille. Enfin, nous allons avoir de l'aide. Vous pouvez continuer pour ajouter plus d'icônes et plus de choses que vous souhaitez. OK, je ne pense pas que nous utilisions l'étiquette de terrain AI, effacez-la. Les FAQ, nos amis, nous ne les avons pas utilisées. Essuyez-le. Vous pouvez décider de vous en servir si vous le souhaitez. Oups. Un favori vide n'a pas été trouvé dans les diagonales de Riyad. Ma préférée. Ce type est là. Oups, les gars, nous avons deux suffixes avec MD. Je vous ai dit que cela ne marchera pas si vous ne le faites pas apparaître également. Si vous ne le préfixez pas. Je ne sais pas pourquoi ils ont construit ce genre de choses. Alors, bravo. Bien, les gars. OK. Bien. OK. Désolée. Je pense que cela fonctionnera cette fois. Oui, ça marchera. favoris posent problème. Je ne sais pas pourquoi. Quoi qu'il en soit, Tailwind est mon préféré. Maintenant, tout dépend de quel jeu ? Et cela fonctionne parfaitement comme prévu. Tout a l'air bien. Vous voyez qu'un appareil mobile s'affiche bien. De ma part. Jette un coup d'œil. C'est classique. C'est classique. Très bien les gars, on en a fini avec le top maintenant. Le terme suivant est donc de mettre en œuvre le futur troisième composant. Faisons-le lors de la prochaine conférence. À bientôt. 60. 58 SiseNav final: Très bien, donc avant de passer au futur composant, nous devons apporter les corrections nécessaires. Lorsque vous ouvrez le navigateur, vous vous rendez compte que par défaut, le dessin latéral est ouvert. Tu peux voir ? Ainsi, lorsque l'utilisateur visite votre site Web, c'est exactement ainsi qu'il va s'ajouter ici. Et ce n'est pas agréable du tout. Alors maintenant, vous pouvez voir que lorsque je clique dessus, il se ferme. Pouvez-vous voir par défaut qu'il apparaît comme ceci. Sais-tu pourquoi ? C'est simplement parce que nous avons défini l'état initial comme étant vrai. Revenez au code VS, directement sur les lignes 14, où se trouvent les états. Nous allons le mettre sur faux. L'état initial est donc faux. Lorsque vous revenez au navigateur, vous pouvez voir qu'il apparaît comme prévu, puis l'utilisateur doit cliquer sur l'icône du hamburger pour ouvrir le tiroir de navigation. Une chose que j'adorerais également faire est de mettre en œuvre les droits onclick, ce ne serait pas exagéré. Ainsi, lorsque je clique sur la superposition, je devrais pouvoir fermer le tiroir de navigation. Je vais vous en montrer une copie. Et voici la superposition. Ce que je vais faire maintenant. Voyons si cela va fonctionner. Quelque chose comme ça. Sûr. Ici. Lorsque vous cliquez sur le hamburger, il s'ouvre sur le côté. Dessiner. Lorsque vous cliquez sur la superposition, le tiroir de navigation du site se ferme. Très bien, nous ne dépendons donc plus uniquement de l'icône de fermeture. Vous pouvez également cliquer sur l'icône plus. Êtes-vous en train de cliquer sur la superposition ? Magnifique. La prochaine correction sera le logo ici. Nous voulons donc que l' Aedes apparaisse physiquement. Donc, ce que je vais faire maintenant, défiler la page vers le haut, c'est donner le nom de la classe en espagnol, puis le tableau de bord des polices. Et cela le fera paraître plus sûr pour le corps sur le navigateur. Tu vois à quel point c'est beau ? Jette un coup d'œil. Génial. J'adore ça. 61. 59 Composant en vedette: Bon retour à tous. Dans cette conférence, nous aborderons le futur composant. Accédez à VS Code, ouvrez l'Explorateur, puis écrivez dans le package de composants, vous allez voir le futur. Du jazz. Cliquez pour ouvrir un FCE afin de générer les composants fonctionnels de la flèche React. Faisons rapidement le rendu de ce composant, n'est-ce pas ? Nous sommes dans l'application Js. Et assurez-vous de l' importer en haut de la page. Maintenant, la première chose à faire est de déclarer un tableau d'objets. Et à droite, dans l'objet, nous allons avoir l'URL des images que nous voulons faire glisser. Ici. Je vais faire des curseurs const, equa, le définir un tableau vide et les droits dans le tableau, nous allons avoir l'objet. Alors ne vous inquiétez pas, j'ai déjà préparé l' objet. Ce que nous allons faire, c'est copier et coller. C'est aussi simple que cela. Revenons donc aux matières alimentaires. Ça pourrait l'aider et ensuite copier les objets du héros. Revenez ici, surlignez à nouveau les lignes 5 à 7. Effacez-le car nous avons copié les objets prêts à l'emploi. Il ne reste donc plus qu'à coller. OK, donc toutes ces images, je les ai déployées sur Cloudinary. OK, j'ai un compte Cloudinary où je peux télécharger des images. Bien. Cela fait, la prochaine étape consiste à déclarer la variable d'état nécessaire à utiliser. Donc, en haut de la page, nous voulons utiliser le crochet américain. Donc, juste en dessous du tableau, nous allons générer les extraits de hook américains comme celui-ci. Nous allons donc avoir ici des ensembles d'indices actuels. Laissons ces deux capitales voir. L'état initial sera zéro. Ça va ? Implémentons l'interface utilisateur. Met en lumière le futur. Essuyez-le. Donnons-lui un nom de classe inscriptible dans la classe, nous devons utiliser les classes utilitaires pour styliser le div. Donnez-lui une largeur maximale de 15, 20 pixels, une hauteur de 500 pixels. La largeur. Faisons en sorte que cela dure quatre ans. Rembourrage supérieur et inférieur. Ce sera parce que le rembourrage gauche et droit sera de quatre. Et nous allons lui faire placer droits relatifs au sein de la division. Nous allons avoir un autre div, lui donner un nom de classe, puis nous allons à nouveau spécifier que la largeur sera pleine largeur. Je dois donc juste copier à partir d'ici. La hauteur correspond à la hauteur maximale. Cela portera la hauteur à 100  % et la largeur à 100 %. Tu devrais le savoir maintenant. Gérez vos dettes pour exceller, BAG. La durée est de 500. La position d'arrière-plan est au centre. La taille de fond est du cava. Cela devra donc redimensionner les images pour les adapter au conteneur. Ce sera donc durée de la transition, aussi simple que cela. Alors laisse-moi te montrer rapidement. Maintenant. Je peux choisir d'y appliquer des styles. Image d'arrière-plan. Nous devons maintenant utiliser les curseurs d' URL littéraux des modèles dans le tableau. URL du point d'index actuel. Voyons donc ce qui se passe sur le navigateur. Le navigateur. Vous voyez maintenant que c' est la première image. Alors laissez-moi vous expliquer ce qui se passe sous le capot. Ici, nous avons une série d'objets. Pour accéder à l' élément d'un tableau, nous devons utiliser l'index du tableau. Nous disons donc ici que l'état initial de l'indice est nul, ce qui signifie qu'il va renvoyer cette image ici. Alors, lorsque vous consultez le navigateur, c'est ici ? Il s'agit de la première image à droite, dans le tableau. Ensuite, lorsque j'en indexe une, elle récupérera la deuxième image du tableau. Pouvez-vous voir l'index 2 qui récupérera les éléments de texte ou l'image du tableau. Parfait. Hein ? Maintenant, nous avons réussi à afficher nos images, mais maintenant elles ne glissent pas, mais attention, nous le ferions en GeV. Donc, avant de passer aux diapositives, nous devons également implémenter les flèches gauche et droite. Défilons rapidement vers le haut, où nous allons importer les icônes des icônes Reacts, BS sous forme de différents compacts. Gauche. Nest, c'est la bière Chevron Combat Rights. Il suffit donc de les surligner et de les copier ici. Et puis changeons-le pour écrire. C'est aussi simple que cela. Faites défiler vers le bas. Juste après cette division. Nous allons avoir une autre division. Hein ? Dans la division, nous allons afficher le nombre de composés restants. Appliquons le style pour obtenir la position absolue. Cela placera donc l'icône en haut de l'image. Le sommet est de 50 %. Nous allons donc avoir une traduction x négative ici. Traduisez ensuite y. Spécifiez une valeur personnalisée. 50 %, c'est vrai, c'est cinq. Tests sur Excel. Cela indique donc que la taille de police n, la hauteur de ligne arrondie est pleine. Rembourrage. À l'arrière-plan il y aura un tiret orange 700. Le test est blanc. Réglons le curseur pour qu'il soit un pointeur. est aussi simple que cela. Enregistrez dans le navigateur. Voilà, ce type est censé venir vers la gauche. Voyons ce qui ne va pas. Le taux le plus élevé est de 50 %. Traduisez x moins zéro, traduisez Y. Ce sera -50 %. Ici. Cela est censé commencer par la gauche et se déplacer par la droite. Je pense que cela réglera le problème. Jette un coup d'œil. Tu peux voir ? Parfait. La prochaine étape consiste donc à dupliquer cette icône ici, puis à l'aligner pour obtenir un carré. est facile à faire. À partir des lignes 2042, lignes 26, surlignez et dupliquez. Alors, ici, changeons cela pour écrire en toute sécurité. Maintenant, tu vois ? Bien. Changeons donc l'icône pour indiquer le côté droit. Voici plusieurs compacts. Bien. Bon, les gars, tout est en train de prendre forme et n' oubliez pas de revoir, enrichir ce cours, c'est extrêmement important car il faut que je sache exactement ce que vous ressentez là-bas. J'enseigne bien. Magnifique. D'accord ? Donc, en gros, ce que je veux faire maintenant , c'est cacher les flèches. Ensuite, nous voulons que l'erreur soit visible lorsque nous survolons le curseur. Pour cela, je vais faire quelque chose comme ça. Ici. Nous allons regrouper le div parent comme ceci. Alors viens ici et je vais m'occuper du chauffage. Cela va donc masquer la flèche vers la gauche. Maintenant, nous voulons que la flèche vers la gauche apparaisse sur Hoover. Ce que je vais faire, c'est Group Dash, Hoover, avoir un bloc d'affichage normal. Enregistrer. Tu peux voir que quand je passe la souris dessus, ça apparaît. Maintenant, jetez un œil. Vous voyez, appliquons-le rapidement sur la flèche droite. Il suffit de tout copier d'ici. Ensuite, collez. Enregistrez dans le navigateur. Vous voyez, quand je passe la souris dessus, cela montre la flèche gauche et la flèche droite, la droite. Maintenant, lorsque vous cliquez sur les flèches, rien ne se passe. Définissons donc rapidement la fonction pour implémenter la flèche. Faites défiler l'écran vers le haut. Désolé, faisons en sorte que l'état initial soit zéro pour qu'il apparaisse bien. Nous allons donc définir ici une fonction pour gérer le clic sur la flèche. Const. curseur précédent, un noyau, réglez-le sur notre fonction. Et ici, nous allons avoir une variable appelée première diapositive. Réglez-le pour que l' indice actuel soit égal à zéro. Un autre. Et cela s'appellera nouvel indice. Equal est la première diapositive. Donc, si la première diapositive est tout à fait vraie, nous allons créer des sliders. Longueur du point du slido moins un point, flèches. L'indice actuel sera de moins un. La prochaine étape consiste donc à mettre à jour l'état. Nous allons donc définir l' index actuel sur le nouvel index, aussi simple que cela implémente aussi simple que cela implémente les droits de clic dans les compacts Chevron Left, c' est-à-dire la flèche gauche. Et cliquez. Nous devons appeler la fonction curseur précédent. Lorsque vous enregistrez, quittez le navigateur. Essayons-le en cliquant sur le curseur de gauche. Les gars, vous voyez ? Cela fonctionne à merveille. Nous avons maintenant réussi à créer notre propre slider à partir de zéro. Comme c'est beau ces jours-ci. Hein ? Alors maintenant, implémentons-le pour la flèche droite. Nous allons avoir une autre fonction, Constant Nest Slider, réglez-la sur notre fonction. Ensuite, nous allons avoir une variable appelée is first slide current index. Nous allons faire des curseurs de la longueur des points. D'accord ? Nous accédons donc à l'ensemble de la diapositive, à nos droits dans le tableau pour obtenir la valeur totale du curseur. C'est-à-dire la longueur du point du curseur. Et puis ici, nous allons en faire moins un. Nouvel indice. La dernière diapositive est égale. Donc, si la dernière diapositive est vraie, nous allons la mettre à zéro maintenant. Nous allons donc le régler sur l'indice actuel plus un, c' est aussi simple que cela. Nous devons maintenant mettre à jour l'état initial en remplaçant l' index actuel par le nouvel index. Et en fait, ici. Avant de poursuivre, cette diapositive d'Atrazine devrait être la dernière. Donc, ici, cliquez, nous devons appeler cette fonction. Collez-le ici. Enregistrez dans le navigateur. Allons y jeter un œil. Vous voyez que tout fonctionne parfaitement ? Jette un coup d'œil. Encore une chose. Viens ici. Encore une fois. Elles seront en fait destinées aux puces situées juste en dessous des curseurs. Je vais avoir une constante. Passer à la diapositive Equa, index des diapositives. Réglons l'index actuel sur le paramètre slide index. Des gars sympas. Alors allez en haut et importons. Une icône. Cette icône va être enregistrée sous forme de puce juste en dessous du curseur. Lorsque vous cliquez sur les puces, vous pouvez déplacer les curseurs. Ne vous inquiétez pas, vous le comprendrez certainement lorsque nous aurons terminé la mise en œuvre. Notre carburant à points X, comme ceux des icônes React. Juste après cette division. Nous allons avoir une autre division. Stylisez-le de manière sinueuse. Nous allons avoir un écran flexible par le haut. Nous allons l'avoir pour justifier le contenu, une partie centrale en haut et en bas. Il va falloir le faire. Nous allons donc cartographier les diapositives. D'accord ? Alors je vais faire des sliders, des points. Carte. La carte est une méthode, non ? Et c'est vrai. cadre de cette méthode, nous allons intégrer Dans le cadre de cette méthode, nous allons intégrer les éléments d'un curseur de paramètres, ce gars représente ici chaque élément, droite, dans ce tableau. Et dans ce cas, l' URL de l'image, plus calme, légèrement indexée. Nous allons afficher l'interface utilisateur. Un div avec le nom de la classe sera vers x L. Cos est un pointeur. Ferme-le. Hein ? Lorsque le div, nous allons afficher le RX en pointillés. Ferme-le. Alors laissez-moi vous montrer rapidement. Ça dit, Eric, que le carburant en pointillés n'était pas drôle. Tu sais pourquoi ? C'est simplement parce que, encore une fois, nous avons oublié de le préfixer avec RAX. Les gars. C'est ainsi que je réagis. Les icônes fonctionnent. Enregistrer. Tu peux voir ces icônes ? Mais maintenant, lorsque vous cliquez dessus, rien ne se passe. Implémentons rapidement notre propre clique. D'abord. Donnons-lui une clé. Parce que l'application va se plaindre si vous ne spécifiez pas la clé. Laisse-moi te montrer. voyez qu'il est dit qu' un enfant sur chaque liste doit avoir un accessoire clé unique. Je sais que tu sais que ce n'est qu'un rappel. Je vais avoir ici c0 égal à un léger indice. Ce type est là, non ? Enregistrez à nouveau dans le navigateur. Accédez à la console. Rafraîchissons-nous. Maintenant. L'erreur a disparu. Magnifique. OK, implémentons le onclick. Au clic, nous allons appeler la fonction passer à la diapositive suivante. Rendons-le donc lisible. Passez à la diapositive suivante. Copie. Viens ici. Collez-le. OK, très bien. Nous allons donc prendre en compte le paramètre. Un léger indice, c'est aussi simple que cela. Lorsque vous enregistrez dans le navigateur, je clique sur. Vous voyez que ce sont des amis extrêmement fantastiques. Très bien, c'est tout pour le moment pour le slider. Et dans la prochaine conférence, nous aborderons les composants de l'application de livraison. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 62. 60 composante rapide: Très bien, bon retour à tous. Dans cette conférence, nous allons donc passer au composant de l'application de livraison rapide. Heron vers VS Code. Fermez-le, ouvrez le point de livraison js, fermez l'explorateur ou un FCE pour générer le composant fonctionnel React Arrow. Exécutons rapidement died dans le composant de l'application. Et assurez-vous de l' importer en haut de la page. Nous allons donc spécifier la largeur à foo, ce qui donnera un résultat de 100 %. Le fond est blanc. Le rembourrage en haut, le rembourrage en bas sont de 16, puis les rembourrages gauche et droit sont bons. Alors maintenant, cela servira de div parent. Ici, nous allons avoir une étiquette historique. Stylisons-le rapidement. Le test est orange, orange Dash 500. Faisons en sorte que ce soit audacieux. Police de caractères, tableau de bord. Un test consiste à exceller , puis à effectuer des tests d'alignement au centre. Maintenant, je vais faire une livraison rapide en toute sécurité sur le navigateur. C'est ici ? Maintenant, juste après la balise d'historique de fermeture, nous allons avoir un div. Stylisons rapidement le diff. La largeur sera de 15, 20 pixels. Marge-gauche et marge-droite seront automatiques. Nous allons avoir une grille d'affichage. Ensuite, sur un appareil de taille moyenne, nous voulons que la grille affiche les deux points. Les colonnes du modèle de grille servent donc à fermer le div. Maintenant, nous allons avoir une image, IMG. Donnons-lui un nom de classe, puis stylisons l'image. La largeur est de 550 pixels. Ce sera une valeur constante. Tu sais maintenant ce que c'est ? Sommet et marge inférieure de la montagne. Pour SRC. Revenons à la question qui pourrait l'aider afin de copier l'URL. Et le voici. Surlignez et copiez. Viens ici, colle. Fermez-le ensuite à l'aide de l'étiquette à fermeture automatique. Épargons. Découvrez ce que nous avons sur le navigateur. Vous pouvez le voir apparaître ici. Ils sont bons. Donc, juste après la balise IMG, nous allons avoir un autre div. Donnons-lui un style. Nous allons avoir un affichage, une flexion, une direction flexible, une colonne, une justification du contenu, un centre. Hein ? En portant ce div, nous allons avoir un tag P. Donnons-lui rapidement un style. Encore une fois, ce sera un style personnalisé. Ce sont un, un D, un F. Maintenant, les téléphones vont être audacieux. Encore une fois, nous allons avoir une étiquette sur la tête et je vais faire « Allons y jeter un œil ». OK, ça a l'air bien. Nous devons également le styliser, non ? Sur un appareil médian. Le test portera sur notre appareil quatre x L et plus petit, trois d'entre eux exhaleront la police. Faisons en sorte que ce soit audacieux. Rembourrage en haut, rembourrage en bas. Faisons-le aussi. Je pense que cela va mettre tout en ordre. Ça a déjà l'air bien. OK, ne t'inquiète pas. Il va certainement atteindre le sommet. D'accord. Alors maintenant, nous allons avoir une balise p juste en dessous de la balise head. Donc, ici, je vais juste copier un test factice , puis je vais juste le coller ici. Ce n'est donc qu'un test factice. Et si tu veux, tu peux retourner à ce qui pourrait l'aider. Je sais que la plupart d' entre vous aimeraient faire exactement ce que je fais. Alors venez ici et copiez ce test. Mais vous pouvez aller sur Internet et vous contenter de test factice, puis vous pouvez le copier là-bas. Lorsque vous enregistrez, quittez le navigateur. Boum, ça a l'air sympa mais je n' aime pas la façon dont ça apparaît. Formater. Ne t'inquiète pas. Allons-y. Nous allons procéder à un verrouillage, lui donner un nom de classe, puis procéder à la dialyse. Le tableau en arrière-plan va être bloqué. Le test, non ? Nous sommes dans le bateau, il va y avoir ce type ici. Il suffit de copier. Pas besoin de répétition. La largeur, 200 pixels, arrondie, la police. Faisons-en un médium. Marge, haut et bas. Faisons en sorte qu'il y ait six marges, à gauche et à droite. Faisons en sorte que ce soit automatique. Sur un appareil médian. Nous allons avoir une marge de zéro à gauche et à droite. Et le rembourrage en haut et le rembourrage en bas seront au nombre de trois. Donc, juste à l'intérieur du bateau, je vais écrire, commencer. Sûr. D'accord, donc tout semble aller bien, mais je n' aime vraiment pas le résultat. Il ne me reste donc plus qu'à revenir à VS Code. Découvrons les choses ici. C'est le div qui contient l'ensemble de ces informations ici. Donc, ce que je vais faire, c'est que nous en avons 15, 20, changeons en 12, 40. Sûr. Vérifions-le ou écrivons. Tout a l' air vraiment génial. Et cela apparaît comme prévu. ne reste plus qu'il n'y a pas d'espace entre la balise p en bas. Je pense donc que nous devons régler ce problème rapidement. Maintenant, ajoutons les gars de droite Vous voyez que nous en avons ajouté six comme marge en haut et marge en bas. Mais regardez, ça ne marche pas. Et vous voyez que nous devons faire le Dash Six. Et voilà. Des gars parfaits. C'est tout pour le moment. Et dans la prochaine conférence, nous aborderons les principaux composants de pointe. Et là, je vais également vous apprendre à créer un slider React à l'aide de la diapositive fournie. Rendez-vous lors de la prochaine conférence. Restez concentré sur « prenez toujours soin de vous ». 63. Composante 61 Top Pick: Bon retour à tous. Dans cette conférence, nous allons procéder à la mise en œuvre du slider, qui représente les principaux composants. Alors, sans plus tarder, allons-y. Ouvrez l'Explorateur. Ensuite, nous devons ouvrir le point culminant js, fermer l'Explorateur. Ensuite, je vais faire un FCE pour générer le composant fonctionnel de la flèche. Pour l'instant, je veux changer cette division, non ? Nous voulons avoir un fragment de réaction qui a été enregistré en tant que nœud parent. Bon, à l'intérieur de ces fragments, je vais faire la première page. Je vais donc aborder ici des sujets. Donnons-lui une classe pour pouvoir le styliser. Le test Orange Dash 500, les polices, nous voulons qu'il soit hué. Badge de test pour Excel. Alignons le texte au centre. Rembourrage en haut et en bas, en bas. Faisons en sorte que ce soit le plus simple et le plus juste. D'accord, disons que pour l'instant, droits se trouvent dans le composant de l'application . Exécutons-le sur le composant élevé et faisons bien de l' importer dans un bac. Sûr. Assurez-vous que l' application est en cours d'exécution. Très bien, donc sur le navigateur, le voici. Cela sera donc enregistré en tant qu'en-tête. Magnifique. Maintenant, la prochaine étape consiste à implémenter ce planeur. OK, alors rendez-vous rapidement sur splice gs.com. Ensuite, vous allez voir le bouton Commencer, cliquez dessus. Et puis, ici, vous pouvez lire la documentation afin de comprendre les œuvres de hauteur bien connues. Mais pour l'instant, je vais simplement passer au MPM ici. OK. Laissez-moi vous montrer rapidement. Vous pouvez voir le lien vers cette page, à droite, indiquerait de l'aide ou du flou. Voici comment installer la diapositive React ici. Je vais copier, revenir à VS Code Control C pour arrêter la commande V du serveur en cours d'exécution, coller la commande, puis appuyer sur la touche Entrée pour la lancer. Bon, installé, réussi. Maintenant, la prochaine étape consiste à l'importer en haut de page dans le sujet. Et puis encore une fois, revenez à React Slide. Nous devons copier cette entrée ici . Collez-le en haut. Sûr. Bien. Très bien, très rapidement, nous devons également importer les données que nous allons utiliser pour le curseur supérieur. Je vous conseille de minimiser votre VS Code. Commande B pour ouvrir l'explorateur, fermer les composants et fermer le SRC. Ouvrez donc les aliments. Ensuite, vous allez trouver le paquet appelé données ici. Hein ? Dans ces données, nous avons le module data js, qui comprend les catégories, les données de pointe intermédiaires et supérieures étant imprudentes. Quand nous aurons fini d'importer, je vous le divulguerai. Faites-le glisser puis déposez-le directement dans le SRC. Pouvez-vous voir qu'il se trouve maintenant dans le SRC. Quand je fermerai le SRC, vous ne verrez plus les données. Tu vois bien ? Maximisez nos droits. Alors ouvrons-le. Vous verrez maintenant un ensemble d' objets et de droits au sein de l'objet. Vous allez voir certains éléments sous la forme d'une paire clé-valeur, qui est l'identifiant. Et en voici un, le titre, et voici de quoi il s'agit. Le prix à 50€ et l'image. Voici ensuite les données pour les sommets les plus élevés. Je vais de nouveau faire défiler la page vers le bas. Vous allez voir les données du repas. Bien entendu, il existe une série d' objets comprenant la carte d'identité, le nom du repas, la catégorie dans laquelle il appartient, l'image et le prix. Faites défiler à nouveau vers le bas. Vous allez voir les données des catégories. Et bien sûr, c'est exactement la même chose, mais nous avons maintenant des données différentes. Oui, donc c'est exactement ce que c'est. Et l'avantage de faire cela est de vous permettre de travailler avec l'API, accord, donc si nous pouvons récupérer des données d'ici. Ensuite, la récupération de données sur les dinosaures S ne sera certainement plus un problème à l'avenir. Lorsque nous commencerons à créer le site Web du film, nous devrons certainement l' adapter à partir d'un point de terminaison API. Donc, tout en haut, nous allons importer les données directement dans le module de données, toutes nommées export. Laisse-moi te montrer. Pouvez-vous voir un spot const top peak ? Il s'agit donc d'une exportation nommée. Et nous devons l'importer comme ceci à partir de données obliques à points. est aussi simple que cela. Bien. Maintenant, c'est ici que le plaisir commence. Nous allons avoir un div ici, lui donner un nom de classe pour le styliser. Nous voulons qu'il soit caché dans un appareil plus petit. Donc, dans un appareil plus grand, nous voulons qu'il affiche la flexibilité, la largeur maximale. Nous en voulions 15 ou 20. Donc, en toute simplicité, nous ne souhaitons pas afficher la catégorie du curseur sur les téléphones portables. Ça va ? Nous voulons qu'il soit affiché sur un écran plus grand, tel que votre ordinateur portable, de bureau et les autres. Bien sûr, ce sera en pixels. Et puis la marge est automatique. Mais dans le rembourrage supérieur et inférieur , le motif de la main gauche, la droite est également deux. Une fois cela fait, nous devons cartographier les données, ce qui est le cas des données thématiques Nous devons donc cartographier tous ces sommets ici. Comme ça. Nous voulons qu'ils le lisent et qu'ils l' affichent ensuite à l'écran. C'est en fait très simple à faire. Tout d'abord, les crochets bouclés qui s'ouvrent et se ferment. Ensuite, je vais créer une carte à points des sujets. Alors ici, je vais faire un article. Cet élément représente donc chaque objet, à droite, dans la zone du sujet. Oui, alors maintenant, nous allons retourner l'interface utilisateur. Et directement dans l'interface utilisateur, nous allons commencer à afficher les éléments tels que le titre, le prix, N, l'image. Donc, ici, je vais avoir un div avec le nom de la classe et ensuite nous devrons le styliser. Nous allons donc styliser le rayon de la bordure, qui sera une position relative de trois x L. Donc, dans ce div, nous allons avoir un autre div, lui donner un nom de classe, puis styliser le div. Donc, puisque ce gars est positionné par rapport, nous voulons le positionner manière absolue afin qu'il puisse être au-dessus de la division parent, comme ceci. D'accord ? Donc cette division va être positionnée au-dessus de ce gars. C'est la position la plus simple, absolue. La largeur est pleine, ce qui la porte à 100 %. La hauteur est pleine, ce qui fait également la hauteur à 100 % le BG, je vais faire un tableau de bord B G. Mais dans ce cas, nous voulons que ce soit un peu transparent. Je vais donc le diviser par 50, puis l'arrondir, ce qui rendra les bordures un peu courbes. Ensuite, je vais passer à Excel, le test. Il suffit de le rendre blanc. Fermez le div. OK. Fermons ça. Je pense que je vais bien. Cool, comme ça. Nous voulons donc utiliser la balise p pour afficher le titre. Donc, ici, je vais faire p, puis le titre du point de l'article. Vous vous souvenez que cet élément représente chaque objet du tableau. Donc, le titre de cet article à points, c'est le titre que nous essayons d'afficher. Et puis tous ces titres comme celui-ci, tous comme celui-ci seront affichés. Parce que nous avons utilisé l' élément qui représente chaque objet à afficher, ce titre. Je le comprendrais certainement assez bien. Enregistrez, et vérifions-le dans le navigateur, n'est-ce pas ? Donc, avant de le vérifier sur le navigateur, rappelons-nous que nous avons arrêté le serveur Nous devons donc le redémarrer à nouveau. Très bien, faites défiler la page vers le bas. Où sont les données ? On ne le trouve nulle part ? Lorsque vous observez l'écran, se peut que vous ne voyiez pas les données, n'est-ce pas ? Mais je peux t'assurer. Les données se cachent dans le coin inférieur gauche de l'écran. Laisse-moi zoomer un peu. Et maintenant, je veux vous montrer vous pouvez voir simplement parce que nous n'avons pas stylisé, est-ce exactement pour cela que cela apparaît comme ça ? Alors viens ici. Maintenant, dialysons-le, donnons-lui un nom de classe et écrivons bien le nom de classe. Mais à gauche et à droite, il y a deux photos. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur, se peut que vous ne le voyiez pas clairement. Alors faisons quelque chose dès maintenant. C'est la division parentale de ce gars, d'accord ? Nous avons donc positionné ce gars par rapport, puis nous avons positionné ce div comme étant absolu. Dans le sens naturel, cela signifie que cette division sera juste en face de ce d. D'accord ? Alors laisse-moi te montrer rapidement. Maintenant, sortez de la rue, sortez de ce D, d'accord. Nous allons avoir une balise IMG parce que je veux afficher l'image dès maintenant afin que tout apparaisse comme nous le souhaitons. Ici. Donnons-lui un nom de classe. Bien, d'abord, affichons l'image avant le nom de la classe. Donc, je vais juste annuler la balise à fermeture automatique et je vais créer SRC equal item point IMG. Laissez-moi vous montrer ici. Alors c'est ici. Lorsque vous enregistrez dans le navigateur. L'idée, voyez-vous, est maintenant tout semble correct, mais ce n'est pas beau, car nous n'avons pas non plus stylisé l'image. Mais au moins, vous pouvez voir que c'est de la nourriture ici avec le titre correspondant. Voici le Sharma, le jus de fruits, les yaourts, les orangers, l'œuf que je plante. Le Wu Vata aura bon goût. Du tilapia, du riz en juillet. Oh mon Dieu, les gars. Stylisons ce truc. Dialysons-le rapidement. Maintenant. Nous allons donner à cet IMG un nom de classe. La hauteur sera une hauteur personnalisée. Faisons donc 200 pixels. La largeur. Faisons 2100 pixels, ce qui est plein. Alors, maintenant. Sauvegardons et voyons ce que nous avons. Cela ressemble à ceci. Ne t'inquiète pas. Lorsque nous commencerons à implémenter le curseur, il y aura des espaces entre les éléments. Maintenant, finissons-en. L'objet de style va être appelé. Ce sera donc l'objet qui convient. Et en fait, cela permet de redimensionner l'image pour l'adapter à son conteneur réel. Nous voulons que les bords de l' image soient un peu incurvés, expirez le plus grossièrement. Faisons-en un pointeur. Ainsi de suite, lorsque vous passez la souris sur l'image, nous voulons la redimensionner. 105. Bien. Et nous voulons en réduire la durée. Faisons-en 300. Vous avez raison d'enregistrer sur le navigateur, donc lorsque nous survolons l' image, rien ne se passe. Très bien les gars, je pense que nous devons configurer un slider avant de commencer à voir certains des changements. Mais pour l'instant, arrondissons simplement avec le curseur. D'accord ? OK, implémentons le code en bas à droite en dessous de la balise p, qui se trouve juste dans ce div ici. Nous allons afficher le bas. Je vais le faire pour couper. Dialysons la frontière. La frontière. Faisons-le en pointillés. C'est mon propre style, vous pouvez donc faire autre chose de votre côté. La couleur de la bordure sera blanche. Le test. Faisons en sorte qu'il soit blanc également. marges gauche et droite auront leur position absolue. Enfin, le bas. Faisons quatre, ce qui correspond à la marge inférieure. D'accord ? Lorsque vous enregistrez, voyons les résultats. Bien. Tu vois la ligne pointillée ? Tu vois ? Mais le problème maintenant, c'est qu'il n' apparaissait pas en blanc. Fais-moi voir quelque chose. Oups, les gars. C'est là que réside le problème. La bordure est censée être blanche. Vous pouvez maintenant le voir à l'écran. Vous voyez, d'accord, implémentons le curseur pour que tout soit bien conçu pour implémenter le curseur. Tout d'abord, nous devons installer React Slide, ce que nous avons fait au stade initial. Consultez le fichier package.json. Et le voici. Ensuite, lorsque vous atteignez le sommet, nous devons importer ce fléau sur la diapositive, y compris le package CSS. Maintenant, ce que nous allons faire, c'est l' emballer avec le matériel fourni. Donc, juste après cette division, je vais faire le nécessaire. Fermez-le, assurez-vous de le surligner, de le copier, puis de le coller ici. Comme ça. OK, bien. Maintenant, dans cette diapositive, je vais utiliser les options pour ouvrir et fermer les crochets bouclés, puis nous voulons qu' ils apparaissent quatre par page. Si vous observez l' écran en ce moment, vous vous rendrez compte que près de dix articles apparaissent paire (page 1, 234-567-8910). C'est la raison pour laquelle l'image n'a pas pris sa forme. Bon, maintenant, nous voulons quatre éléments par page. Donc, comment le faire, c'est petit à petit. Nous le voulons pour. Et encore une fois, avant de continuer, terminons-le avec la diapositive fournie. Juste en dessous du retour. Nous allons diviser la diapositive, la surligner couper, la balise de fermeture, puis la placer après le div de fermeture. Ici, comme ça. Lorsque vous enregistrez un écran observé, vous vous rendez compte que cette ville sera appliquée. Vous voyez que nous avons 1234 et vous pouvez maintenant faire glisser les images. Tu vois à quel point c'est génial ? Nous avons les flèches pour glisser. Jette un coup d'œil. Magnifique. Maintenant, si vous observez les objets, vous vous rendrez compte qu'il y a plus d'espace entre les deux. Oui, alors faisons-le rapidement. Venez ici pour créer des espaces entre les objets. Tout ce que nous allons faire, c'est que l' écart sera égal à 0,5 rem VC, selon mes propres spécifications, vous pouvez le faire pour m cinq ou ce que vous voulez à la fin. Enregistrez et consultez le navigateur. Maintenant, tu vois, tu peux voir ça ? C'est cool. J'adore ça. OK, donc une chose que je veux faire est de rendre le médicament un peu plus doux. Alors faisons-le rapidement. Assurez-vous de placer une virgule ici et ensuite je me débarrasserai de la drogue. Lorsque vous observez l'écran, qui se trouve sur le côté gauche de l'écran, vous verrez cette flèche coulissante juste ici. Je n'aime pas ça. OK, donc je vais me couper les cheveux et ensuite je vais faire des flèches. Mettons-le sur faux. Et je pense que c'est terminé. Tu vois ? Maintenant, la flèche a disparu. Des champs se forment. Que devons-nous encore faire ? OK, ouvrons la console et laisse-moi te montrer. Ici, il est dit que chaque enfant ait au moins un accessoire clé unique, bien sûr, vous devriez le savoir maintenant. Alors ce que je vais faire maintenant, c'est que la clé est égale au point. Nous devons donc rechercher quelque chose qui sera utilisé pour identifier de manière unique les articles. Et ici, je peux vous dire que l'identifiant est la seule chose qui peut être utilisée pour identifier de manière unique tous ces objets ici, car vous pouvez également avoir deux articles au même prix. Vous pouvez avoir deux objets portant le même titre. Je pense donc qu'utiliser l' identifiant est la meilleure idée. Oui, alors maintenant je vais m'occuper de l'identification par points de l'article. Lorsque vous enregistrez dans le navigateur. Sortons à nouveau la console. Rafraîchir. Magnifique. Maintenant, vous ne voyez plus l' erreur de l'index clé. Veuillez utiliser des charges lorsque vous appliquez la clé, cela doit être fait au plus haut niveau. Donc, quand je fais quelque chose comme ça, copiez cette clé ici, capturée. Supposons que je veuille l'appliquer à cette division. Lorsque vous enregistrez dans le navigateur, ouvrez la console, et vous verrez que le graphique dans les feuilles doit avoir un accessoire clé unique, simplement parce que nous avons appliqué l'accessoire clé à ce DVD ici. Cela devrait donc être fait au plus haut niveau. Alors faisons-le comme ça. Paiement sécurisé, navigateur, rafraîchissement de la console, rechargement. Tout fonctionne parfaitement comme prévu. Jusqu'ici, tout va bien. Tout va bien. J'adore ça. Le nid en ligne est donc destiné à montrer le prix. Et bien sûr, donnons-lui une alternative ici afin que si l'image n'apparaît pas, quelque chose de bon apparaisse réellement. Si l'image n'apparaît pas, nous allons afficher le nom de l'article. Alors maintenant, je vais faire le titre de l'article par points. Donc, si nous avons une pause dans l'image, nous voulons afficher ce contenu ici, qui est le titre. OK, formatons le code pour qu'il ait l'air propre. Enfin, nous allons appliquer le prix. Encore une fois. Nous voulons utiliser la balise p pour ce faire. Oui, nous allons avoir un tag. Ensuite, je vais faire le point price de l'article. Lorsque vous enregistrez et quittez le navigateur. Vous voyez maintenant que le prix est le suivant. Dialysons-le rapidement avec un ClassName, qui doit lui donner une place dans B X tiret 2, mais à gauche et à droite, il y en a deux. Et ici, pour le titre, nous devons également faire en sorte que les polices soient en gras. Police, tiret, tableau. Le test pour exceller, rembourrage en haut. OK, uniformisons les choses. Partie supérieure. Faisons en quatre. Tu vois que tout semble bien ? J'adore ces résultats. Des amis. Vous voyez les gars, tout semble bien. Mais si vous observez le bord gauche de l'écran, vous vous rendrez compte qu'il n' y a pas d'espace entre les deux. Et je n'aime pas ça. OK. Donc, ça devrait partir d'ici comme ça. Allons-y et examinons le schéma qui reste. Le nom de la classe Div est atteint. Un grand écran doit apparaître, fléchir la position. La largeur maximale est de 15, 20 pixels, la marge est Otto, l' onde P et le P X sont de deux. Mais les gars, regardez. C'est là qu'intervient l' erreur. C P x. Ici, nous devons supprimer le signe égal. Tu peux voir le coffre ? Jetez-y un coup d'œil maintenant, ça a l'air bien. Les gars, en fait, nous sommes des êtres humains, nous sommes sujets à des erreurs lorsque vous tapez , que vous enseignez, parlez, vous feriez certainement des erreurs. Oui, donc, mais ça n'a pas forcément importance parce que tout le monde fait des erreurs. C'est tout pour le moment pour le slider et il fonctionne parfaitement bien. J'adore le résultat final une fois de plus. Oui, alors jetez un œil. Magnifique. C'est tout pour le moment. Et dans la prochaine conférence, nous passerons au moulin. Nous devrons donc afficher les inscriptions sur les aliments à l'écran. À bientôt. 64. 62 composantes de repas: Bon retour à tous. Auparavant, nous avions implémenté le curseur de pointe supérieur. Et celui de papa. Très bien, donc dans cette conférence, nous allons procéder à la mise en œuvre du composant repas. D'accord ? Nous allons donc cartographier les données des repas et les afficher à l'écran avec un très beau design. Et croyez-moi, le design va être réactif comme d'habitude. De l'héroïne aux composants du code VS, puis du repas. Mais g ferme l'Explorateur, un FCE pour générer le composant de la fonction React Arrow. OK, je vais l' enlever pour le moment. Retournez au fichier app.js et affichez-le ici. Commençons par styliser ce div. Tout d'abord, donnez-lui un nom de classe. Et puis la largeur maximale, 15, 20 pixels. Marge automatique. Mais je n'ai pas gauché le patron à pour le rembourrage en haut et en bas. Faisons-en 12. Oui, donc, dans cette division, nous allons avoir la balise Hedge One qui sera enregistrée comme titre. Maintenant, je vais aborder le sujet. Je veux le copier d'ici, surligner l'étiquette d'en-tête, venir ici et coller. Nous devons juste modifier la rédaction. Notre repas Save. Et le voici. Pouvez-vous voir juste en dessous de la balise H1, nous allons avoir un div, donnez-lui un nom de classe. Et puis stylisez moins le div. Nous voulons que ce div apparaisse dans une sorte de colonne de grille. Très bien, nous allons donc parler de grille d'affichage. Alors. Sur les appareils de taille moyenne tels que les iPad, nous souhaitons que la grille apparaisse en deux colonnes. Je vais donc faire des colonnes de la grille, tiret deux, c'est aussi simple que cela. Donc, sur un appareil plus petit, qui est SM, remplacez ce gars par S M. Sur un appareil plus petit, nous voulons une colonne. Et sur un appareil plus grand, nous voulons quatre colonnes. Ici. Je vais le remplacer par notre GI. Et pas le LG sous la forme de votre gadget. OK, c'est grand. Susan, tu as raison, quel nid ? L'écart devrait être de six, mais je pense que nous devrions implémenter le reste des styles lorsque nous aurons terminé le design. Ici, dans la division, nous devons cartographier les données. Et bien sûr, dans la conférence précédente, nous avons importé ces données ici. Et c'est vrai, nous sommes dans les données SRC, SRC, puis vous allez voir le fichier de données JS. Donc, vers la droite, dans ce module, nous avons les données Mu. Et bien sûr, il ne s'agit que d'un ensemble d'objets. Et écrivez l'objet de rendu, nous avons les éléments sous forme de paire clé-valeur, l'identifiant, le nom, catégorie, l'image et le prix. Et puis nous en avons combien ici ? Nous en avons jusqu'à 15. Bien. Commande B pour fermer l'explorateur. Ensuite, nous allons ouvrir le crochet ici pour intégrer les expressions JavaScript. Mais avant de continuer, nous devons importer les données en haut, je vais faire les importations. Il s'agira d'une exportation nommée de données sur les repas à partir de données obliques (SIG). Ici, je vais faire une carte à points des données sur les repas, la méthode cartographique, le vaccin, un paramètre appelé item. Et bien sûr, vous pouvez nommer ce paramètre comme vous le souhaitez, mais je vous recommande vivement de vous tenir à l'élément de convention, d'accord ? Mais vous pouvez lui donner n' importe quel autre nom descriptif à votre côté. Cet article représente donc les droits de chaque élément dans l'objet. Réglez-le donc sur notre fonction. Ensuite, nous voulons renvoyer une interface utilisateur. Bien, dans l'interface utilisateur, nous allons avoir un div. Donnons-lui un style. Alors. La bordure de cette division sera nulle car elle servira de carte. Oui. C'est donc la division sur laquelle reposera l'ensemble de ces sommets. Nous allons donc avoir la frontière connue sur Hoover. Lorsque vous passez la souris sur ce div ou sur cette carte. Pour ainsi dire, nous voulons l'adapter à 105. Et la durée est de 300. Ferme-le. Oui, alors quel nid ? Maintenant, nous allons avoir une balise IMG. Img. Nous allons créer SRC, qui est la source et la source de cette image. Cela provient de l'image par points de l'article. Fermez-le à l'aide de l'étiquette à fermeture automatique. La recette provient donc , bien entendu, des données que nous avons importées en haut de la page. Ainsi, lorsque vous enregistrez et consultez dans le navigateur, les identifiants, pouvez-vous voir la beauté maintenant sur un grand écran, apparaissent en quatre colonnes, la première colonne, la colonne 23.4 également. Si vous observez attentivement, lorsque je passe la souris sur l'image, elle zoome un peu, ce qui la rend extrêmement belle. Jette un coup d'œil. Vous pouvez voir que vous verrez, cependant, je comprends qu'il n'y a pas d' espace entre les éléments, mais nous pouvons tout aussi bien résoudre ce problème rapidement. Maintenant, revenons à la carte, qui représente ce type. Je vais faire un écart, écart de six. Enregistrez dans le navigateur. Vous voyez maintenant qu'il y a de l'espace entre les images. Mais encore une fois, vous vous rendrez compte que les images ne sont pas bonnes, Stout, ne vous inquiétez pas, nous allons le faire en G V. Nous avons donc réussi à afficher toutes les images correctement, dans les données des repas. Ces gars sont là. Tout ça est cool. Vous savez maintenant comment marcher dynamiquement avec React js en utilisant la méthode map. Enseigner, c'est bien. Magnifique. Très bien, continuons. Maintenant. Stylisons l'image. Donc, ici, je vais faire ClassName, directement dans la classe, je vais faire la largeur. Allons-y à 100  %, la hauteur. Faisons en sorte que ce soit 100% sécurisé sur le navigateur, les identifiants. Maintenant, tout est cool, mais si vous l'observez à nouveau attentivement, vous vous rendrez compte que les images se cassent un peu , comme cette image ici. Nous devons donc redimensionner l'image de manière à ce qu' elle s'adapte à son contenant. Et la façon de le faire est de spécifier les flux d'objets. Viens ici. Et je vais faire Object Dash Cava. Les flux d'objets sont donc en cava, enregistrez-les sur le navigateur. Vous pouvez voir qu'ils apparaissent tous bien maintenant, je les aime bien. Faisons en sorte que le bas de l'image soit un peu incurvé. Viens ici et je vais faire un tiret arrondi, LG, enregistrer sur le navigateur. Celle de papa. Vous avez maintenant les bordures arrondies. J'espère que vous pouvez le voir clairement. Bien. Continuons. Très bien, les gars, il y a quelque chose que je viens d'observer en ce moment. Si vous le regardez de près, vous vous rendrez compte que la hauteur des images n'est pas égale. Je préfère cette douche ici. La hauteur n'est pas la même que celle de cette pizza. Et aussi, ces poissons tilapia très savoureux que vous pouvez voir là-bas. Nous devons donc trouver un moyen de rendre les hauteurs égales. Et bien sûr, ce sera très facile. Modifions donc la hauteur à 200 pixels. Lorsque vous enregistrez dans le navigateur. Ils sont tous égaux. Maintenant, enseigner bien, c'est beau. Donc, s'il y a une rupture dans l'image, nous devons afficher le type d'option alternatif. Donc, ici, je vais faire une alternative. Nous voulons l'afficher de manière dynamique. Je vais mettre le nom de l'article à point. Bien. Maintenant que c'est fait, travaillons sur le nom. Juste après la balise de fermeture de l'IMG, nous allons avoir un div, donner un nom au cluster pour le styliser. Et puis nous allons le faire afficher Flex. Justifiez l'espace de contenu entre haut et le bas du rembourrage pour le rembourrage à gauche et le motif à droite. Faisons-en quatre également. OK, faisons ces deux pour que ça ne devienne pas trop. Fermez le div. Économisez, directement dans cette division, nous allons utiliser la balise p pour afficher le prix. D'accord ? Je vais faire Hi Tim, chiens, prix, économiser et voir sur le navigateur. OK, maintenant vous avez le prix ici, mais ce n'est pas ce que nous voulons. Maintenant, dialysons-le. Donnons-lui un nom de classe. Nous voulons que le fond soit orange. Orange Dash 700. La hauteur est, c'est la largeur. A 18 ans. Nous voulions nous amuser. Vous pouvez voir que cela rendra le rayon de la bordure sphérique, presque 100 %. Ouaip. Lorsque vous enregistrez sur le navigateur, celui de papa. D'accord, voyez-vous que cela n'apparaît pas bien maintenant. Maintenant, nous voulons le placer au-dessus de l'image. Je vais donc faire Margin Top. Ce sera moins dix. C'est pourquoi j'utilise cette marge négative supérieure à dix. Cela fera donc cette valeur une valeur négative. Enregistrez et voyez de quoi je parle. Cela va le pousser vers le haut. Vous voyez maintenant que nous avons le contenu ici, juste en haut de l'image. Souvenez-vous donc qu'avant, c' était en dessous de l'image, maintenant c'est en haut, à droite. Alors le test, faisons en sorte qu'il soit blanc. blanc. Pui, qui représente le motif en haut et en bas, bas du rembourrage à gauche et à droite se trouve jusqu'à la bordure, huit parce que nous voulons lui donner une très grande bordure. Lorsque vous épargnez et semez vous-même, pouvez-vous voir maintenant que cela prend progressivement forme. Honnêtement, j'adore ça. Cela semble si beau et si beau. Oui, c'est cool, génial, fantastique. Les polices, mettons-les en gras. Tableau de bord des entreprises. Très bien, je n'ai donc pas affiché le prix. Le nid et la ligne sont là, vérifions-les ici. Le nom du repas. Oui, donc juste au-dessus du prix, nous allons avoir un autre tag p. Ensuite, je vais faire le nom du point de l'article. C'est aussi simple que cela. Enregistrez, vérifiez-le. Et vous voyez que le nom apparaît ici. Et à l'heure actuelle, cela a fait grimper le prix vers la droite. Tout va bien ici et j'adore ça. Continuons. Donnons-lui un peu de style. Ici. Je vais créer un tableau de bord des polices. C'est la seule chose que nous allons faire ici . Je peux t'assurer. OK, cool. La prochaine est la vue plus de votes. Oui, nous allons donc avoir un bouton Afficher plus juste en dessous du nom de l'article. Donc, juste après ce div de clôture, nous allons avoir un autre div avec le nom de la classe. OK, fermons-le. Donnons-lui un rembourrage à gauche de deux, puis un rembourrage en haut et en bas. Faisons en sorte qu'il tombe. OK, maintenant, il se peut que vous ne voyiez rien. Travaillons-y donc ici. Nous allons avoir un tag P et je vais le voir comme ça. Et ce que je vais faire, c'est l'afficher avec une flèche. Alors montez en haut. Importons. Importons l'icône flèche SM droite à partir de. Donc, avant de procéder à la saisie, installons rapidement le package ici. Npm install, adhere, icon slash, react on ici, est-ce que vous pouvez aussi visiter votre page et la copier à partir d'ici. Vous voyez le feu vert pour l'installation. La solution est en cours d'élaboration. Continuons donc à l'importer depuis Hero Icone Slash, React et Look. L'installation est terminée. Magnifique. Bien, redémarrons le serveur pour ne pas avoir à recommencer. Nous voulons donc afficher ici l'icône. Et je vais en faire plus après la vue. Je vais créer notre icône OSM droite. Fermez-le à l'aide d'une étiquette à fermeture automatique. Donnons rapidement à ce tau, la largeur. Faisons-en cinq. Marge gauche. Faisons-le aussi. Oui, donc lorsque vous enregistrez et consultez le navigateur, accord, les gars, l'icône ne fonctionne pas. Je ne sais pas vraiment pourquoi. Je vais donc mettre la vidéo en pause, puis faire une recherche en coulisses pour comprendre pourquoi l' icône ne fonctionne pas. Parce qu'en fait, nous avons fait le bon choix ici. Nous pouvons aussi faire quelque chose comme une barre oblique. Voyons ce qui va se passer. Cela n'a pas fonctionné. OK, regardons la console. Vous essayez d'importer, bla, bla, bla, bla, bla. À partir de V1. Les deux ont installé votre propre vision des icônes à nos bonnes personnes, il semblerait qu'ils aient en fait amélioré la bibliothèque. Maintenant, je dois faire une réinitialisation en coulisse et voir ce qui fonctionne pour nous. Bien. À bientôt. C'est bon, les gars, embarquez. Après les recherches que j'ai faites en coulisse , je m'en suis rendu compte. Ils ont amélioré la bibliothèque, d'accord, donc la seule solution que j'ai pour le moment est de rétrograder la bibliothèque professionnelle. Si vous regardez ici, vous vous rendrez compte que nous avons installé la version 2.0. L'idée est donc de le rétrograder à la version 1. Oui, donc je vais juste le surligner, l' effacer, l'enregistrer directement dans le fichier package.json. Et viens ici, laisse-moi te montrer. Nous devons copier ce gars d'ici, comme ça, une copie. Et puis directement dans le terminal, assurez-vous que vous êtes dans le répertoire client, commande V pour coller. Ensuite, je vais le faire simplement parce que nous devons cibler une version spécifique, 1.0, 0.6. C'est donc la version qui nous permettra d'utiliser cette erreur particulière. Donc, quand j'installerai, voyons ce qui se passe. OK, très bien. Installé, réussi. Et pourquoi ? Revenez donc au gyrus médial. Et puis, si vous n' avez pas ce schéma, il vous suffit de faire quelque chose comme ça. Contour en forme de barre oblique. Enregistrer. Commençons par plusieurs fois. Très bien, donc lorsque vous faites défiler la page vers le bas, voici l'erreur. Nous avons maintenant la flèche affichée à l'écran. Ensuite, la ligne Nesta doit être correctement alignée car nous voulons qu'elle se trouve davantage juste devant la vue. Oui. Revenez donc au code VS. Alors. Dialysons le tag P. Donnez-lui un nom de classe. Ici, nous allons l'avoir Display Flex. Ainsi, lorsque vous affichez Flex, tout apparaît sur la même ligne. C'est ici, tu peux le voir ? Génial. Nous allons aligner les éléments au centre. Le test. Esquive. Le lot Indigo en contient 100. Allons y jeter un œil. Oh, magnifique. J'ai jeté un coup d'œil. Tu peux voir ? Cela fonctionne bien. Imaginons qu'il y a des espaces entre le mode d'affichage et que le nom de l'élément est en fait trop grand et qu'il n'est pas bien aligné par rapport à l'axe gauche. Réglons donc cela rapidement. Donnons-lui une marge en haut. Ce sera une valeur négative, ce qui la poussera vers le haut. Faisons-en sept. Enregistrez le navigateur. Maintenant, cela a fonctionné, mais ce n'est pas dans la même ligne à partir du côté gauche. Très bien les gars, c'est tout pour le moment. Et dans la prochaine conférence, nous continuerons avec cette composante. 65. 63 clé de composant: Bon retour à tous. Très bien, donc avant de poursuivre, je voudrais attirer votre attention sur un résultat très crucial et moi, pour ouvrir la console, n'est-ce pas ? Nous sommes dans la console. Vous voulez voir que c'est un enfant dans une liste qui devrait avoir un accessoire clé unique, les gars, j'ai vraiment pensé que vous serez capable de le découvrir de votre côté. Mais pas de problème, je vais vous aider à revenir au code VS ici. Laisse-moi voir. Juste dans ce div, nous allons spécifier la clé. La clé est égale à l'identifiant item.name. L'identifiant est celui qui peut être utilisé pour identifier de manière unique les éléments du tableau de données sur les repas. Bien sûr, tu le sais. Laisse-moi te le montrer encore une fois. OK, voilà. L'identifiant est donc unique. Nous devons donc utiliser l'ID comme une sonde à clé unique pour identifier chaque élément du tableau ou chaque objet, exemple, Refresh. Et maintenant, lorsque vous actualisez la console, tout fonctionne correctement. Vous n'avez plus l'erreur agaçante sur la bonne. Une autre chose importante que je souhaite que vous preniez note est le nom de l'objet et l'équipe View Mobile. Nous voulons donc qu'il soit conforme. Vous voyez qu'il semble que cela se chevauche. Ce que nous devons faire maintenant, c'est les aligner correctement. Viens ici. Donc, juste dans cette division, cette division ici. Nous avons donc dit que le schéma, de gauche à droite, est quatre ici alors que Micky deux ici, Save. Maintenant, tout est en ordre. Une autre chose que nous voulons faire ici est que, comme vous pouvez le voir il n'y a pas d'espace entre le titre et les éléments. Alors je vais juste tout foirer. Ici. Nous avons un IP de 12 ans. Ça, ici. Voyons ce qui va se passer. Faisons venir un PUI. Mais en haut et en bas, en bas, faisons quatre. Enregistrer dans le navigateur ou non ? Maintenant, tout fonctionne parfaitement comme prévu. Dans la prochaine conférence, nous commencerons à implémenter la navigation de plaisance afin de trier les articles par catégories. Rendez-vous lors de la prochaine conférence. 66. 64 boutons de tri: D'accord, nous avons maintenant un très beau design avec les éléments affichés à l'écran. La prochaine étape consiste à implémenter les tableaux pour trier les articles par catégories. Très bien, donc en cliquant sur le bouton, nous voulons trier les articles par catégories correspondantes. Mettons-le rapidement en œuvre. Vs Code. Donc, juste après le headtag de fermeture, nous allons avoir un div. Donnons-lui un nom de classe pour pouvoir le styliser. Nous allons avoir ce div Display Flex. La direction de flexion est le côlon. Sur les gros appareils, la direction de flexion sera Rho. Justifiez le contenu au centre, fermez le DFF. Donc, dans ce div, nous allons avoir un autre div, lui donner un nom de classe, puis nous pouvons styliser le div. À l'heure actuelle. Nous allons avoir un affichage flexible, donc je vais juste copier à partir d'ici et coller. Nous voulons également qu'il soit justifié de centrer la pâte. Et qu'y a-t-il, encore une fois, sur un appareil moyen MD. Nous voulons également justifier le centrage du contenu . C'est aussi simple que cela. Très bien, créons rapidement les boutons. Voilà, je vais le faire, d'accord, nous sommes dans les moments forts de la navigation de plaisance. Dupliquez-le trois fois. Je vais donc faire une pizza, enregistrer, vérifier l' orthographe du poulet. Enfin, je vais faire la Salat, économiser. Et voyons ce que nous avons sur le navigateur. Et des os. Tu peux voir que ça ressemble à ça ? Elle est en effet très belle, mais je tiens à lui donner une petite professionnelle pour que le bouton apparaisse comme une Andes mesurées. Ce qu'il faut faire maintenant, c'est donner le cours de botanique puis le styliser, souligne le Bertin. Et s'il vous plaît, soyez précis, je ne mets en évidence que les droits de vote contenus dans le tag. Je suis en train de mettre en évidence les langues. Ainsi, lorsque vous surlignez le premier président secondaire, l'ergothérapeute et la touche de commande de votre clavier. Appuyez ensuite sur la flèche vers le bas pour sélectionner l' ensemble des éléments à plusieurs reprises, puis donnez-lui un nom de classe. Vous voyez maintenant que nous voulons styliser l'ensemble des boutons en même temps, et c'est fantastique. Cela facilite le travail. Les gars, je vais vous apprendre quelques étapes professionnelles ici. Et j'espère qu'il vous plaira. Donnez-lui une marge d'un point. La bordure sera orange, tiret 700, mais le test sera blanc. Donc, sur Hoover, nous voulons changer la couleur de fond en blanc. Je vais le faire sur Hoover. Changez l'arrière-plan en blanc. Oui. Puis également en survol. Nous voulons changer le test en orange Dash 700. Encore une fois sur Hoover. Nous souhaitons également changer la couleur de la bordure en orange tiret 700. Je pense que c'est tout pour le moment. D'accord, enregistrons rapidement sur le navigateur. Oups, jette un œil. Alors les gars, changeons l'arrière-plan ici. Nous devons appliquer le contexte. Laissez-moi vous montrer comment nous procédons actuellement. Ici, la bordure doit être orange. Le test est blanc, la marge est une. Ensuite, nous allons spécifier l'arrière-plan. Bg, tiret, orange, tiret , 700, enregistrez et voyez le résultat sur le navigateur. Bien. Tout fonctionne parfaitement bien. Mais pour l'instant, lorsque vous cliquez sur les boutons, rien ne se passe. Oups, les gars, jetez un œil. Assurez-vous de le corriger. Il doit être solide et pas autrement. Comme ça. Très bien. Pizza, tout est orthographié. Et puis enregistrez ici. Bien. Il apparaît bien avec l'effet de survol qui fonctionne parfaitement. Magnifique. J'adore ce que je vois, honnêtement. Ainsi, lorsque nous cliquons sur les petits pois pour voter, tous les articles liés à la place sont sélectionnés. Chicken va sélectionner les articles liés au poulet. Et puis Solid filtrera également les éléments bien notés. Alors, comment faire ça maintenant ? Nous devons donc d'abord importer le crochet américain en haut. Il est important de recourir à la dette. Et ici, nous allons créer les extraits usted. Et je vais appeler ça des aliments. Nous allons mettre des aliments comme celui-ci sur Cup. J'ai jeté un coup d'œil. Et ici, l'état initial sera celui des données repas, qui sont l'objet de données que nous avons dans le package de données. Est-ce important de vous le montrer à nouveau ? OK, laisse-moi te montrer ici. C'est le repas Beta, d'accord ? Cela étant fait, on suppose que nous avons attribué les données relatives aux repas à une variable appelée aliments. Alors je vais copier, viens ici. Nous allons donc carte à points des aliments lorsque vous enregistrez et consultez le navigateur. Phrase : tout est cool. Oui. C'est vrai. Implémentons donc la fonctionnalité de filtrage. Détruisez juste en dessous des variables d'état. Nous allons définir la fonction pour filtrer les articles par catégorie. Maintenant, je vais faire quelques catégories TA, c'est le nom de la fonction. Ensuite, je vais prendre la catégorie comme paramètre, puis la définir sur notre fonction. Ici, nous devons mettre à jour l'état initial. Je vais donc utiliser un filtre à points pour les données sur les repas car nous allons filtrer les données MUX pour sélectionner précisément chaque catégorie. D'accord ? Donc, ici, je vais faire un article, oui. Encore une fois, réglez-le sur notre fonction. Prêt à l'emploi, nous allons renvoyer la catégorie de points de l'article égale à la catégorie réelle, à droite, dans les données des repas. Donc, une fois cela fait, moins d'une ligne consiste à implémenter le onclick. Formatons le code. Comme ça. Décliquez sur Égal. Nous devons mettre à jour les aliments selon mes données. OK, bien. Surlignez cette copie, retrouvez la pièce ou la boîte, puis collons-la ici. Mais maintenant, dans ce cas, nous voulons appeler la fonction que nous avons définie ici. Appelez cette fonction comme suit. Ensuite, nous devons passer dans la catégorie pizza. D'accord ? Enregistrez, et voyons si cela fonctionne. Il indique que les catégories ne sont pas définies pour. C'est moi qui l'ai fait ? Alors que, oh mon Dieu, les gars, jetez un œil à la ligne 10. Maintenant, ça devrait fonctionner. C'est ma date qui n'est pas définie. Oups. Les yeux du gars se ferment ici. Il est tard dans la nuit, vraiment désolée. Essayons-le maintenant sur Piazza. Ça marche, les gars, c'est magnifique. Et quand je clique sur Tout, tous les repas sont renvoyés. Je pense que c'est bien, mais salade de poulet ne fonctionne pas pour le moment. Mettons-le rapidement en œuvre. Je dois juste copier ce type. Collez-le ici. Et ça va être du poulet. J'aime tellement le poulet. Copiez ensuite à nouveau, en insérant dans le corps solide, puis remplacez la catégorie par solide. Enregistrer. Sur le navigateur. Rafraîchir. Lorsque vous cliquez sur pizza, pizza, le poulet et la salade de poulet s'affichent. Il semble solide. Ce sont des gars extrêmement fantastiques et j'adore ça. J'adore chaque instant de ce cours. C'est tout pour le moment et tout fonctionne parfaitement comme prévu. Vérifions la réactivité du mobile. Tu peux voir ça ? Ça marche bien ? Jette un coup d'œil. Prenons-le sur un appareil iPhone. Poulet à la salade. Oh mon Dieu. OK, continuons. Dans la prochaine conférence, nous commencerons à implémenter la section des principales catégories. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 67. 65 catégories tendance: Magnifique. Très bien, donc dans cette conférence, nous allons travailler sur les principales catégories. Donc, en gros, nous allons cartographier les catégories et les afficher à l'écran. Et bien sûr, nous allons lui donner un très beau design afin qu'il soit attrayant aux yeux des utilisateurs finaux. Accédez à la commande B de VS Code pour ouvrir les catégories jazz de l'explorateur. Ensuite, je vais faire une analyse approximative, dégénérés sont des composants fonctionnels et ensuite nous devons simplement parcourir à nouveau les données. Voici donc les données des catégories, cette flèche ici avec l'objet, puis les éléments là-bas. Donc, en gros, nous allons afficher le nom et les images. Ferme-le. Donc, tout d'abord, je vais importer des catégories. Et s'il vous plaît, il s'agit d'une petite lettre tirée d'une barre oblique à points. Bien sûr, tu devrais le savoir maintenant. Nous devons afficher le composant des catégories directement dans l'application. Et assurez-vous également de l' importer en haut de la page. Alors maintenant, je vais créer des catégories console.log. Quelque chose apparaît très certainement directement sur la console. Et voici les détails. Tu peux voir ? L'indice doit être zéro, l'identifiant est un, le nom de la catégorie et le chemin de l'image. Oui, donc les gars, c' est exactement ce que nous avons pour le moment. Voyons donc comment afficher toutes ces difficultés à l'écran. Donnons un nom de classe au div afin de le styliser. La largeur maximale sera de 15, 20 pixels. Marge, automatique. Le rembourrage à gauche et en bas à droite est pour les étrangers en haut et le rembourrage en bas est de 12 K. Je veux être précis, donc je n'en suis pas sûr. Laisse-moi ouvrir le mail JS ou n'importe lequel des trucs et laisse-moi voir. D'accord. 15, 20, je pense que c'est ça. D'accord. Amende. Lorsque vous enregistrerez ici, nous aurons une étiquette d'en-tête qui sera enregistrée en tant que titre, page 1, juste à l'intérieur de Je vais également créer des catégories tendances. Je dois juste copier le style d'ici. Ils sont tous pareils. Copie. Viens ici. Il suffit de le remplacer comme ça. Enregistrez le navigateur. Ici. C'est ça. Bien ? Le PY est donc de 12 pixels, je pense que nous devrions en faire quatre pixels. Oui, c'est la version bêta maintenant. Très bien, alors continuons. heure actuelle, la ligne de Vanessa consiste à cartographier les données, puis à les afficher à l'écran. Et en plus de styliser l'article de manière à ce qu'il apparaisse bien aux yeux des utilisateurs finaux. Ici, nous allons avoir un div, lui donner un nom de classe, un tiret. Nous allons donc avoir sa grille d'affichage. Sur un appareil de taille moyenne. Nous voulons que la grille affiche les colonnes six. Ensuite, donnez cinq points à l'écart, rembourrage en haut et en bas, cinq, le rembourrage à gauche et le motif à droite. Faisons-le aussi. Commençons par cartographier les catégories. Catégories, points, carte. Je pense que vous pouvez tous cartographier un objet. n'est plus grand-chose pour vous tous, car nous faisons depuis le faisons depuis quatre ou cinq conférences. Donc, oui, ils peuvent utiliser qui représentent correctement chaque élément , dans le tableau. Et puis ici, nous allons renvoyer une interface utilisateur, lui donner un div avec le nom de la classe. Dialysons le modèle div à utiliser, faisons en sorte qu'il affiche Flex. Justifiez le contenu pour le centrer. Articles, alignez. Centre. Sur Hoover. Nous voulons qu'il soit échelonné de un à cinq et que sa durée soit de 300. OK, très bien. Fermé sous dv. Encore une fois. Ici, je vais créer une image à points égale à IMG, SRC. Ferme-le. Quand tu économises. Sortons-le sur le navigateur. Oups, il n'y a rien ici. C'est vrai, les gars. Faisons-le comme ça. Jette un coup d'œil. Tu peux voir ? Cela fonctionne. Ça a l'air magnifique. OK, allons-y tout de suite. Donc, l'image, nous allons lui donner une alternative. Si le lien de l' image disparaît, quelque chose d'autre pourrait apparaître à l'écran. Maintenant, l'alternative, d'accord, je vais faire le nom du point de l'article. Donc, lorsque le lien de l'image est mort, ce type va apparaître, qui est le nom de l'article. Permettez-moi de vous montrer, par exemple , une erreur là-dedans pour le moment. Lorsque j'enregistre sur le navigateur, vous voyez qu'il va afficher les noms, n'est-ce pas ? Ce sont donc les alternatives, n'est-ce pas ? Bien. Je vous ai dit au début de ce cours que je vais essayer autant que possible tout expliquer simplement pour que tout le monde le comprenne suffisamment bien. Et d'ailleurs, varie la voix d' Albert Einstein. Tout est cool. Lorsque vous consulterez la console, vous verrez celle-ci ici. Donc, pour celui-ci, maintenant, je veux que vous mettiez la vidéo en pause et que vous essayiez autant que possible de l' implémenter de votre côté. Bon retour à tous. Maintenant, je veux t'aider à résoudre ce problème. En fait, ce n'est pas un problème, d'accord ? C'est donc une chose très simple que tout le monde peut faire. Nous devons donc spécifier la clé, n'est-ce pas ? Au plus haut niveau. Je vais m'occuper trop de l'article, de identification parce que l'identification est quelque chose qui peut être utilisé pour identifier de manière unique les catégories. Rafraîchissons-nous. Bien. Vous pouvez voir qu'il est mobile et réactif. Difficile, d'accord, donc tout fonctionne parfaitement comme prévu. C'est tout pour le moment. Et dans la prochaine conférence, nous commencerons à implémenter les composants de la newsletter. On se voit alors. 68. 66 Trending Cateogry compte: Alors rapidement, passons au composant de newsletter VS Code. Ensuite, nous devons ouvrir les composants de la newsletter. OK, vite, Let's run died dans le composant de l'application. À présent, allons-y. Donnons à cette classe de défauts le nom de cette classe. Nous pouvons donc le styliser. La largeur maximale sera, comme d'habitude, de 15 ou 20 pixels. La marge sera Otto. Le test. Faisons en sorte qu'il soit blanc. Rembourrage à gauche et à droite. Faisons en sorte qu'il tombe. Alors. Le BG, qui est la couleur de fond, nous allons spécifier notre propre couleur personnalisée. Donc je vais faire 24, 26 pour être un autre div avec le nom de la classe. Cette fois-ci, je vais créer une grille d'affichage automatique Max Dash et un gros appareil. Nous voulons qu'il accueille la troisième colonne. Et puis le div avec le nom de la classe. Donc, appareil déverrouillé, nous allons le réparer. Marge, haut et bas. Faisons cinq ou quatre. D'accord. Nous allons avoir une étiquette et je vais vous donner de bons conseils sur la façon d'améliorer votre sol. Nous allons avoir un tag p ici. Logan, oui. OK, enregistrons l'application pour voir ce que nous avons dans le navigateur. Un autre div, donnez-lui un nom de classe, puis je vais faire MON tableau de bord quatre, non ? Au sein de cette division. Nous allons avoir un autre div avec le nom de la classe , puis nous aurons un display flex. La direction de flexion est donc le côlon. Sur un appareil plus petit. La direction de flexion sera la ligne. Alignons les éléments. Centre. Justifiez le contenu. Espace entre. La largeur sera complète, ce qui la portera à 100 %. D'accord ? Très bien, nous sommes dans cette division, nous allons avoir une balise d'entrée ici. La saisie se rapproche avec une étiquette à fermeture automatique. Donnons-lui un nom de classe. P, tiret trois. Nous allons avoir un écran flexible qui sera plein. Puis arrondi. En milieu de test, on va le rendre noir. Bien. Et le type d'entrée est égal à, e-mail. Donnons-lui un espace réservé. Je vous enverrai un e-mail lorsque vous enregistrerez sur le navigateur. Et le voici. Ok, donc le terme suivant est de créer le bateau. Donc, juste après la balise de fermeture du champ de saisie, nous allons avoir une bouteille. Donnez un nom de classe à ce bouton, puis stylisez-le. L'arrière-plan sera un arrière-plan personnalisé. Je vais donc utiliser les flèches D, F, a. Le test est large. Nous voulons que la frontière soit un peu courbée. Les polices seront de largeur moyenne. Donc, la largeur du bouton, soit 200 pixels. Marge gauche. Faisons en sorte que la marge reste quatre. Et puis marge en haut et marge en bas. Faisons-en six. Marge-gauche et marge-droite. De plus, faisons-en six. Alors. Bordure. Aucune. Donc, ici, je vais me prévenir en toute sécurité. Vous pouvez le voir je pense que la largeur du bouton ne l'est pas. Très bien, les gars. C'est censé être des pixels, non ? Bien. Donc, juste après le div de clôture, nous allons avoir une balise P. Et je vais le faire. Donc. En fait, cela aidera à créer de l'espace entre les deux. Et je vais le faire ici. Nous allons avoir span, donnez-lui un nom de classe. Nous devons le styliser. Testez, testez à l' intérieur, tout ira bien. Il suffit d'utiliser la même couleur ici, donc copiez et collez. Très bien, enfin, ce que je vais faire maintenant, c'est mettre en évidence la balise de fermeture saisie, puis la fermer ici. Ensuite, juste en dessous de la division de clôture, nous aurons une flèche en forme de haie. Donnez-lui un cours. Cela tracera donc la ligne intermédiaire. Alors inquiète-toi, je vais te montrer, d'accord, faisons un commentaire à ce sujet. Enregistrez l'application. Et maintenant, nous avons quelque chose comme ça. Ça a l'air sympa. Supprimez les commentaires , puis le nom de la classe. Je vais le faire. Mon Dash Eight. Pour styliser l'attelage, utilisez le tiret G tiret gris 700 sur la bordure. Dash One. Voici les résultats. OK, donc cette ligne. Pensez que tout est cool. Oui, donc encore une fois, passons en revue tout ça parce que je n'aime pas la façon dont le bouton apparaît. Alors restez dans les parages. Mon E6. P x est égal à trois, puis P Y est égal à trois. D'accord ? Je pense donc qu'il faut y ajouter un rembourrage. Je vais donc faire PY, qui est rembourrage, haut, rembourrage bas. Faisons-en trois. Sauvez nos yeux. Il apparaît très bien et je l'adore. C'est donc tout pour le moment pour les composants de la newsletter. Et dans la prochaine conférence, nous passerons au FUTA. Rendez-vous lors de la prochaine conférence. 69. Composante 67 pieds: Bon retour à tous. Très bien, donc dans la conférence précédente, nous avons implémenté le composant newsletter. Bien sûr, tout se passe bien comme prévu. Dans cette conférence, nous allons donc procéder à la mise en œuvre du FUTA. Retournez à VS Code, ouvrez l'Explorateur, puis voici les années complètes de Todd. Chaque FCE génère notre composante fonctionnelle de la ligne de tonus veineux consiste à importer les icônes de réseaux sociaux nécessaires qui seront utilisées en pied de page. Donc, ici, je vais le faire dans des pots FA, dribbler avec des virgules carrées. Et cela devrait être triple B, puis f, un Facebook Square, une FAA, un carré GitHub, Instagram. Et enfin, FA, Twitter. Et tout cela provient des icônes React Dash. Ensuite, nous devons le résoudre, le corriger avec le plus simple que nous ayons, FH reboot Square, f. F est un grand carré, GitOps Square, Instagram et Twitter. Très bien, continuons. Maintenant. Dialysons la division. Ensuite, nous allons avoir une largeur maximale de 15 ou 20 pixels. La marge va être automatique. Le motif X, de gauche à droite, sert à rembourrer le haut et le bas, bas jusqu'à la couleur de fond. Très bien, nous allons donc copier certains des articles de la newsletter. OK, c'est donc la couleur de fond que nous avons utilisée. Alors je vais juste faire comme ça. Très bien. Nous allons avoir un autre div, lui donner un nom de classe, puis être en haut et en bas, le bas étant 16. Mais alors le schéma de gauche à droite est quatre. Nous allons avoir une grille d'affichage. Et sur un appareil de grande taille, nous voulons que la grille affiche trois colonnes. Alors l'écart, l'écart est de huit. Les tests lui donnent une couleur de grille verte 300. Cool. Une autre division, c'est vrai, dans cette division, nous allons avoir une étiquette d'en-tête. Ensuite, je vais le faire en stylisant rapidement l'Hadrien, lui donnant une largeur complète. Le test sera de trois x L. La police sera en gras. La couleur va être orange. Dash 500. Magnifique. Maintenant, nous allons avoir une balise p, n'est-ce pas ? Quand la balise p, je vais copier et coller le test factice. Formatons le code. Après la balise p de fermeture, nous allons avoir un autre div, lui donner un nom de classe, puis lui faire afficher Flex. Justifiez le contenu. Espace entre les appareils de taille moyenne. Nous allons avoir une largeur de 75 %, une marge supérieure et une marge inférieure. Faisons-en six. Et voici ça. Lee est l'endroit où nous allons afficher l'icône. OK, donc d'abord, nous allons avoir la taille carrée de Facebook. Faisons-en 30. Ensuite, surlignez-le, dupliquez-le quatre fois. Cet endroit sera Instagram, FE Twitter, GitHub Square. Et enfin, FE a dribble au carré. Très bien, économisons. Laissons ça. Le composant directement dans l'application G se trouve ici. Nous allons avoir une conférence complète pour l'importer en haut. Enregistrez dans le navigateur. Ce sont ceux-là. Tu peux voir ? Jette un coup d'œil. Facebook, Instagram, Twitter, GitHub, au dribble. Ma porte. Il n'est pas apparu en tant que spectateur. Ne t'inquiète pas. Nous allons lui donner un entraîneur professionnel. Alors faisons-le rapidement. Donc, juste après ce div de clôture, nous allons avoir un autre div avec le nom de la classe. Désolé les gars, c'est vrai, dans la division. Sur les appareils plus grands, nous allons avoir son tiret en colonne, c'est vrai. Nous allons avoir une flexibilité d'affichage, justifier l'espace de contenu entre les six premières marges. Une autre plongée, non ? Dans cette division, nous allons avoir un Hitch Six Darker. Et je vais faire la localisation ici même. Je vais faire en sorte que ClassName soit égal. Faisons en sorte que les téléphones soient de taille moyenne. Le test. Nous allons utiliser un test personnalisé ici. Je vais donc faire 999. Ça va ? Je vais vous donner une petite touche de vert, non ? Maintenant, nous allons avoir au moins sur tout ce que vous écrirez n'était pas une adresse URL. Nous allons avoir les éléments de la liste. Alors, donnez-lui un nom de classe. Le remplissage en haut et en bas servira à tester l'ASM, ce qui implique la taille de la police et les surlignements de la hauteur de ligne Nous devons le dupliquer trois fois. Je vais donc me rendre à New York. Je vais faire les États-Unis, l'Inde. Enfin, il y a le Canada. J'aime le Canada encore plus fort, n'est-ce pas ? Et le fait d'ailleurs. Alors quoi de neuf, maintenant, je vais mettre en évidence cette division. Ensuite, nous allons le dupliquer trois fois. 123. Et c'est le vrai d que nous avons créé. Enregistrez et voyons ce que nous avons sur le navigateur. Tout semble bien, mais ce n'est certainement pas le résultat escompté. Je n'aime donc pas la façon dont tout cela est éparpillé. Revenez donc au code VS à moins de le corriger rapidement. En gros, c'est là que réside le problème. Ici, nous avons dit que sur les appareils plus grands, nous voulions que ce soit la troisième colonne de la grille. Mais le problème, c'est que tout était serré. Et je pense que c'est l'un des inconvénients du vent arrière. Tu dois faire la troisième colonne. Si vous n'utilisez pas ces données ici, cela ne fonctionnera pas pour vous. Ainsi, lorsque vous faites Columbus Dash Three, il le divise en trois colonnes. C'est à ce moment-là que tout ira bien. Et tu vas avoir quelque chose comme ça. Jette un coup d'œil. Ça te plaît ? Très bien les gars, c'est la fin de la conférence et je crois que tout se passe comme prévu. Tu peux voir ? 70. 68 Essai et fixation: Bon retour à tous. Très bien, donc dans la conférence précédente, nous avons implémenté le composant newsletter. Bien sûr, tout se passe bien comme prévu. Dans cette conférence, nous allons donc procéder à la mise en œuvre du FUTA. Retournez à VS Code, ouvrez l'Explorateur, puis voici les années complètes de Todd. Chaque FCE génère notre composante fonctionnelle de la ligne de tonus veineux consiste à importer les icônes de réseaux sociaux nécessaires qui seront utilisées dans le pied de page. Donc, ici, je vais le faire dans des pots FA, dribbler avec des virgules carrées. Et cela devrait être triple B, puis f, un Facebook Square, une FAA, un carré GitHub, Instagram. Et enfin, FA, Twitter. Et tout cela provient des icônes React Dash. Ensuite, nous devons le résoudre, le corriger avec le plus simple que nous ayons, FH reboot Square, f. F est un grand carré, GitOps Square, Instagram et Twitter. Très bien, continuons. Maintenant. Dialysons la division. Ensuite, nous allons avoir une largeur maximale de 15 ou 20 pixels. La marge va être automatique. Le motif X, de gauche à droite, sert à rembourrer le haut et le bas, bas jusqu'à la couleur de fond. Très bien, nous allons donc copier certains des articles de la newsletter. OK, c'est donc la couleur de fond que nous avons utilisée. Alors je vais juste faire comme ça. Très bien. Nous allons avoir un autre div, lui donner un nom de classe, puis être en haut et en bas, le bas étant 16. Mais alors, le schéma de gauche à droite est quatre. Nous allons avoir une grille d'affichage. Et sur un appareil de grande taille, nous voulons que la grille affiche trois colonnes. Alors l'écart, l'écart est de huit. Les tests lui donnent une couleur de grille verte 300. Cool. Une autre division, c'est vrai, dans cette division, nous allons avoir une étiquette d'en-tête. Ensuite, je vais le faire en stylisant rapidement l'Hadrien, lui donnant une largeur complète. Le test sera de trois x L. La police sera en gras. La couleur va être orange. Dash 500. Magnifique. Maintenant, nous allons avoir une balise p, n'est-ce pas ? Quand la balise p, je vais copier et coller le test factice. Formatons le code. Après la balise p de fermeture, nous allons avoir un autre div, lui donner un nom de classe, puis lui faire afficher Flex. Justifiez le contenu. Espace entre les appareils de taille moyenne. Nous allons avoir une largeur de 75 %, une marge supérieure et une marge inférieure. Faisons-en six. Et voici ça. Lee est l'endroit où nous allons afficher l'icône. OK, donc d'abord, nous allons avoir la taille carrée de Facebook. Faisons-en 30. Ensuite, surlignez-le, dupliquez-le quatre fois. Cet endroit sera Instagram, FE Twitter, GitHub Square. Et enfin, FE a dribble au carré. Très bien, économisons. Laissons ça. Le composant directement dans l'application G se trouve ici. Nous allons avoir une conférence complète pour l'importer en haut. Enregistrez dans le navigateur. Ce sont ceux-là. Tu peux voir ? Jette un coup d'œil. Facebook, Instagram, Twitter, GitHub, au dribble. Ma porte. Il n'est pas apparu en tant que spectateur. Ne t'inquiètes pas. Nous allons lui donner un entraîneur professionnel. Alors faisons-le rapidement. Donc, juste après ce div de clôture, nous allons avoir un autre div avec le nom de la classe. Désolé les gars, c'est vrai, dans la division. Sur les appareils plus grands, nous allons avoir son tiret en colonne, c'est vrai. Nous allons avoir une flexibilité d'affichage, justifier l'espace de contenu entre les six premières marges. Une autre plongée, non ? Dans cette division, nous allons avoir un Hitch Six Darker. Et je vais faire la localisation ici même. Je vais faire en sorte que ClassName soit égal. Faisons en sorte que les téléphones soient de taille moyenne. Le test. Nous allons utiliser un test personnalisé ici. Je vais donc faire 999. Ça va ? Je vais vous donner une petite touche de vert, non ? Maintenant, nous allons avoir au moins sur tout ce que vous écrirez n'était pas une adresse URL. Nous allons avoir les éléments de la liste. Alors, donnez-lui un nom de classe. Le remplissage en haut et en bas servira à tester l'ASM, ce qui implique la taille de la police et les surlignements de la hauteur de ligne Nous devons le dupliquer trois fois. Je vais donc me rendre à New York. Je vais faire les États-Unis, l'Inde. Enfin, il y a le Canada. J'aime le Canada encore plus fort, n'est-ce pas ? Et le fait d'ailleurs. Alors quoi de neuf, maintenant, je vais mettre en évidence cette division. Ensuite, nous allons le dupliquer trois fois. 123. Et c'est le vrai d que nous avons créé. Enregistrez et voyons ce que nous avons sur le navigateur. Tout semble bien, mais ce n'est certainement pas le résultat escompté. Je n'aime donc pas la façon dont tout cela est éparpillé. Revenez donc au code VS à moins de le corriger rapidement. En gros, c'est là que réside le problème. Ici, nous avons dit que sur les appareils plus grands, nous voulions que ce soit la troisième colonne de la grille. Mais le problème, c'est que tout était serré. Et je pense que c'est l'un des inconvénients du vent arrière. Tu dois faire la troisième colonne. Si vous n'utilisez pas ces données ici, cela ne fonctionnera pas pour vous. Ainsi, lorsque vous faites Columbus Dash Three, il le divise en trois colonnes. C'est à ce moment-là que tout ira bien. Et tu vas avoir quelque chose comme ça. Jette un coup d'œil. Ça te plaît ? Très bien les gars, c'est la fin de la conférence et je crois que tout se passe comme prévu. Tu peux voir ? 71. 69 clone Netflix (créer l'application réaction): Bon retour à tous. Dans cette section du cours, nous allons commencer à créer l'eau de toilette Netflix. Et comme d'habitude, nous allons repartir de zéro pour installer une nouvelle application React. Alors, directement sur le bureau, créons rapidement un nouveau répertoire appelé Netflix Clone. Je n'ai pas fait ça. Glissez et déposez le dossier, droite, dans le code VS. Il suffit de fermer la page de démarrage. Très bien, donc je vais juste dire oui. Fermez ensuite cette page, maximisez la tactique de contrôle de la presse VS Code pour ouvrir le terminal intégré VS Code. Ou vous pouvez aussi le trouver dans le menu du haut , domino, nouveau terminal. Laissez-moi le faire glisser ou le compiler, il y en aura, donc ici je vais faire et être x, create dash , react, dash n. Comme d'habitude, nous allons l'installer dans un répertoire appelé clean. Et bien sûr, vous savez que React js est utilisé pour créer une application frontale. C'est la raison pour laquelle nous l' installons toujours dans le cadre d'une restauration directe. Appuyez sur la touche Entrée pour le faire tirer. Et bien sûr, l'installation vous prendra certainement un certain temps. Je dois donc accélérer la conférence. React a été installé avec succès. Ici, je vais faire du npm. démarrages sont corrects, je vais créer un client CD puis npm start. Tout fonctionne comme prévu. Voici la page d'exemple. Nous allons donc rapidement nettoyer le code vers VS. Le code a été refusé. Ouvrez le SRC. Nous n'avons pas besoin du test d'installation dot js. Sélectionnez, appuyez sur la touche de commande de votre clavier, puis appuyez sur le trackpad pour sélectionner les rapports Were Vitaes, le logo, point, SVG up, test.js et tout cela dont nous n'avons pas besoin. Très bien, après avoir fait tout cela, cliquez avec le bouton droit de la souris, placez-le dans la corbeille. Ouvrez l'application Js, le logo a disparu. Nous devons l'effacer. Et de plus, nous n'avons besoin rien ici dans l'application js. Je vais donc simplement tout mettre en évidence, de la balise d'en-tête d'ouverture à la balise d'en-tête de fermeture. Essuyez-le. Assurez-vous de sauvegarder. Revenons au fichier index.js. Et bien sûr, nous n'avons pas besoin du rapport sur les données vitales du Web et de tout ce qui se trouve ici. Essuyez-le. Qu'est-ce qui se passe encore une fois ? Sauvegardons l'application et tout va bien. Le navigateur, ce sont les résultats attendus. Très bien, dans cette conférence, nous allons commencer à créer les pages et les composants. À bientôt. 72. 70 composants et pages: Dans cette conférence, nous allons commencer à créer les composants MPG. Alors, en utilisant les revenus de la SRC, créez un nouveau dossier appelé composants. Un autre, juste au sein de la SRC. Et je vais appeler ces pages une autre. Et cela s' appellera vos T. Enfin, cela s' appellera stand. Bien. C'est vrai. Le répertoire des pages ne comporterait pas des pages comme la page de connexion, film Pitch, l'inscription et bien d'autres. Alors faisons-le rapidement. Connectez-vous à peach.genome, vous pouvez également utiliser GSS si vous le souhaitez. Mais j'aime toujours m'en tenir à l'extension dot js. Encore une fois, directement dans les pages. Nouveau fichier, peach.genes. Voici le joueur Dot Js. Ce sera donc le composant ou la page du lecteur vidéo. Regardez ici, nous allons avoir l'émission de télévision Dot Js. Le pH du film G est. Ensuite, nous aurons Netflix Dot G Is. Très bien, une fois les pages créées, créons rapidement les composants associés moment où le package de composants clique avec le bouton droit de la souris, puis sur le nouveau fichier, nous aurons l'image d' arrière-plan point g ici. Encore une fois. La moitié du chiffre d'affaires avait nos points. Donc, tout ira bien pour moment, au fur et à mesure que nous procéderons aux conférences, nous créerons plus de composants. Bien, une fois cela fait, générons rapidement les composants fonctionnels, directement avec lui. Je dois donc les fermer tous à partir d'ici, fermer les composants. Ensuite, sur la page de connexion, je vais faire notre FCE. Boum, juste comme ça. Netflix ou un lecteur FCE, un abonnement FCE ou un FCE. Et cela doit être appliqué à toutes les pages et à tous les composants. C'est aussi simple que cela. OK, travaillons sur le composant. Très bien, nous avons maintenant terminé de configurer les pages et les composants. Dans la prochaine conférence, nous allons définir nos itinéraires. Rendez-vous lors de la prochaine conférence. Restez concentrés et prodiguez des soins holistiques. 73. 71 Mettre en place les itinéraires: Pour commencer avec l'itinéraire, nous devons d'abord installer le routeur React ici, est-ce juste ici ? Je dois juste copier cette commande. Et bien sûr, vous pouvez aller sur NPM js.com slash packages slash React router, slash packages slash React router, puis copier la commande d'installation ici. Hein ? Nous sommes dans le terminal. Je vais utiliser Control C pour arrêter le serveur en cours d'exécution, puis coller la commande npm, install, React, router, dash, ne pas appuyer sur la touche Entrée pour le démarrer. Installé. Réussi. La prochaine étape consiste donc à implémenter la commande routes P pour faire apparaître le champ de recherche en haut. Et maintenant, tu devrais savoir comment faire. Ensuite, je vais configurer le G est juste ici. Fermons l'Explorateur. D'abord. Nous allons importer les routes et les itinéraires du routeur du navigateur. Laisse-moi te montrer. Je vais le faire dans des pots, navigateur éteint, coma, routes, itinéraires, juste comme ça. Tous ces packages proviendront de React Dash Route. Je n'aime pas juste ça. Très bien, une fois cela fait, préparons rapidement les rondes. Donc, ici, je vais tout supprimer parce que nous voulons encapsuler l' ensemble de l'application directement dans le routeur du navigateur. Je vais donc créer un routeur de navigateur. Et boum, ils serviront de nœud parent pour le moment. Donc, juste à l'intérieur, nous allons avoir les itinéraires. Cela inclut donc toutes les routes sur lesquelles nous allons avoir des droits à l' intérieur de leurs limites. Nous allons spécifier des itinéraires individuels. Oui, donc je vais faire des itinéraires comme ceux-ci. Cela représente donc chaque itinéraire que nous allons avoir. Et cela va fermer l'ensemble des itinéraires que nous allons avoir dans l'application NPR. Et puis, directement dans les itinéraires, nous allons le terminer avec le routeur du navigateur , c'est aussi simple que cela. Donc, pour ce qui est des itinéraires individuels, je vais faire exactement. Nous allons donc cibler le chemin exact. Le chemin sera une barre oblique égale, supposons que vous vous connectez, d'accord ? Ainsi, chaque fois que nous empruntons cette voie, nous devons ouvrir un élément, en l'occurrence la composante préoccupante. Ensuite, je vais créer des éléments. Donc, les éléments que nous voulons ouvrir seront une page de connexion de carte compétente. Assurez-vous de le fermer. Qu'est-ce que l'étiquette à fermeture automatique ? Ensuite, assurez-vous également d'importer la page de connexion en haut. Donc, ce que je vais faire maintenant, c'est fermer la route avec une étiquette à fermeture automatique. Maintenant, je vais le surligner puis dupliquer six fois. Juste comme ça. Ici, nous avons un objectif précis, l'inscription. Lorsque nous emprunterons cette voie, nous ouvrirons la page d'inscription. Assurez-vous de toujours les importer en haut de la page. Et voici les pages que nous avons créées plus tôt dans cette conférence. Il n'y a donc rien de nouveau ici. Donc, lorsque nous empruntons cette voie, nous voulons nous ouvrir. Permettez-moi également de vous montrer le pH de connexion lorsque nous répondons. OK, ouvrons les objets. Encore une fois. J'essaie autant que possible de m'assurer que tout le monde le comprend bien. Lorsque nous emprunterons les itinéraires d'inscription, nous ouvrirons la page d'inscription et ainsi de suite. Ici. Je vais devenir joueur. Et nous devons également ouvrir la page du joueur. Nous allons le faire ici, à la télévision. Et cela ouvrira les émissions de télévision. Ceci va ouvrir la page d'accueil. Et dans ce cas, la page d'accueil est Netflix. D'accord. Je pense que c'est terminé. Laisse-moi vérifier tout de suite. La page d'inscription, la page du film. D'accord. Nous devons également ouvrir la page du film. Donc, je vais le faire ici v. Nous devons donc ouvrir la page du film. Qu'est-ce que l'on s'inscrit à nouveau ? Je pense que nous avons fait tout ce qui était en notre pouvoir ici. Très bien, alors vérifions-le. Lorsque vous enregistrez l'application. Voilà, je vais faire NPM Start. Vérifions-le sur le navigateur. Et maintenant, nous sommes directement sur la page d'accueil, qui est le Netflix dot js. Je vais donc utiliser une barre oblique pour me connecter. Et maintenant, nous sommes sur la page de connexion. Encore une fois, enlevez la barre oblique. Je vais faire Slash, inscrivez-vous. Maintenant. Laisse-moi zoomer un peu. Nous sommes maintenant sur la page d'inscription. C'est donc exactement ainsi que nous allons procéder. Pour tester tous les itinéraires. Nous devons le tester. Encore une fois, on va passer à la télé. Et cela nous amènera au composant ou à la page de l'émission de télévision. Donc, tous leurs artistes fonctionnent parfaitement bien. Vous pouvez tout aussi bien tester vos fins. C'est tout pour le moment. Dans la prochaine conférence, nous commencerons à concevoir la page d'inscription et de connexion. Rendez-vous lors de la prochaine conférence. 74. 72 BackgroundImage ReUseAble capable: Dans cette conférence, nous allons créer les composants réutilisables de l'image d'arrière-plan. Ouvrez donc rapidement l'image d'arrière-plan point g est, hé, c'est ça. Donc, avant de continuer, nous devons installer des composants stylisés. Oui, passons aux plaisanteries du MPM. Hé, est-ce pour installer le composant stylisé ? Il suffit de copier la commande ici. Ou vous pouvez utiliser des composants de tableau de bord de style npm install. Pour installer des composants de style Dash par npm, nous devons arrêter le neurone actuel et effectuer une nouvelle enquête en appuyant sur et effectuer une nouvelle enquête en appuyant Control C, puis en collant la commande ici, npm, qui contient les composants de style Dash installés. L' élément de style est donc ce que nous utiliserons pour définir notre obligation. Fondamentalement, le composant start est une solution de tuilage CSS et JS spécifique à React qui crée une plate-forme permettant aux développeurs d'utiliser leur code CSS réel pour styliser leurs composants. Oui, donc en fait, nous l' utilisons en spécifiant les littéraux tempérés. Ne vous inquiétez pas, vous verrez comment cela fonctionne dans un G V. Je n'ai pas installé le composant de style ici en arrière-plan, nous avons également généré le composant fonctionnel. Donc, d'abord, nous devons importer du Stout à partir de composants Stout. Et juste en dessous, je vais créer const background container equa, start point div. Voici donc comment utiliser les composants robustes. Une fois cela fait, l'ensemble de notre CSS sera écrit entre les litres tempérés. Nous devons donc spécifier les littéraux du modèle. Et d'ailleurs, ce n' est que l'Arctique. Et Arctic se trouve dans le coin supérieur gauche, juste en dessous de la touche d'échappement de votre clavier. Voici que Lee est l'endroit où nous allons écrire le CSS. Maintenant que c'est fait, je vais copier cette classe comme ceci. Ici. Je vais faire comme ça. Oui. Nous devons maintenant travailler sur l'image de fond. Je vais faire IMG, SRC, equa, revenir au matériel Netflix, puis ouvrir. Ils pourraient vous aider et copier le lien vers l'image d'arrière-plan du clone de Netflix. Voici le lien, oui, il vous suffit donc de copier le lien d'arrière-plan de Netflix. Il se trouve directement dans les documents Netflix. Et puis ouvrez l'assistant de code. Ici. Je vais juste le coller, fermer également avec l'étiquette à fermeture automatique. Nous devons spécifier l' alternative. Je vais le faire ici. Equa, connexion Internet. Juste comme ça. Oui, quand vous enregistrez, d'accord, maintenant nous devons styliser cette image. Revenez donc aux composants robustes, à droite, entre les littéraux du modèle. Le style de l'application aurait donc lieu ici. C'est aussi simple que cela. Nous allons donc spécifier la hauteur de l'image de fond. La hauteur. Faisons en sorte que la hauteur de vue soit de 100. Bien, avant d'aller plus loin, je voudrais vous présenter intelligence des composants stylistiques qui vous aidera à afficher les options directement dans l'IntelliSense. Ainsi, par exemple, si vous tapez haie, l'option de hauteur s'affichera. Ouvrez donc les extensions. L'extension que nous allons définir pour l' outil de surlignage de code VS pour les composants standard. Donc, ici, je vais faire VS Code Dash Stout, un gros composant. C'est ici. Il s'agit donc d'un outil de mise en évidence de la syntaxe pour l'installation de composants stylisés. Je l'avais avant. Je l'ai supprimé simplement parce que je voulais l'installer à partir de zéro pour une bonne compréhension. Maintenant, j'ai fini d'installer l'outil de surlignage de la syntaxe, qui doit le fermer. Bien sûr, certains d'entre vous me demandent quel thème j' utilise pour mon code VS. Donc, à nouveau dans le coffret, il ne vous reste plus qu'à préparer votre mirage. C'est ici. C'est donc le thème que j'utilise pour mon VS Code. Et à votre côté, vous verrez le bouton Installer. Alors, installez-le et vous commencerez à faire exactement la même chose avec votre instructeur. J'enseigne bien. Magnifique. Ferme-le. Oui, donc je vais juste enregistrer, puis revenons à l'Explorateur. Fermez-le ici. Spécifiez la largeur. Maintenant, quand je fais ça, pouvez-vous voir les droits dans l'IntelliSense ? Il montre les options. J'adore ça. Cela facilite les choses. Les entreprises installées avec une largeur de vue de 100. Et assurez-vous de toujours le terminer par un point-virgule. Si vous ne terminez pas par un point-virgule, nous aurons certainement des problèmes. Une fois cela fait, nous voulons styliser la balise IMG juste en dessous. Je vais ouvrir et fermer IMG entre crochets. Donnez-lui une hauteur de 100 de hauteur de vue, une largeur de 100 de largeur de vue. Très bien, nous en avons fini avec ça. Nous n'aurons qu'à sauver les imprudents. Vous verrez certainement ce que vous avez fait chez un médecin généraliste. Il ne reste donc plus qu'à démarrer l'application npm start. Si vous voulez voir ce que nous avons fait jusqu'à présent, il vous suffit de commander P, ouvrir l'application js, d'accord, pour l'instant, je dois juste faire un commentaire à ce sujet. Oui, et je vais faire une image d' arrière-plan comme celle-ci. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur. C'est ici. Pouvez-vous voir que ce sont les composants réutilisables d'arrière-plan que nous venons de créer. C'est bon. Tu peux voir ? C'est bien. Parfait. J'adore ça. Je dois juste l'effacer puis supprimer le commentaire ici. Enregistrer. Revenez à la normale. Revenons à la page d'accueil. Supprimez le Slash TV. Et il a au moins la page d'accueil, Netflix. Bien. Permettez-moi de formater le code avec prettier. Très bien, c' est donc terrible maintenant pour les composants réutilisables d'arrière-plan. Et dans la prochaine conférence, nous allons également créer le composant réutilisable d' en-tête . À bientôt. 75. 73 Réutilisation d'en-tête: Dans la conférence précédente, nous avons créé les composants réutilisables de l'image d'arrière-plan. Donc, dans cette conférence, nous allons également créer le composant réutilisable d'en-tête. Donc, commandez P, puis définissez pour Head ArcGIS. Et bien sûr, nous avons également créé tous ces composants dans la conférence précédente. Bien. Nous sommes donc d'abord dans ce composant, nous devons importer le composant standard, importer le style à partir de composants robustes. Et ici, je dois juste effacer ça. Maintenant, je vais faire ici le conteneur d'en-tête. Nous devons donc le créer rapidement. Je suis ici et je vais créer un conteneur d' en-tête equa stout point d. Voici donc comment créer votre composant de démarrage. Cela fait, nous devons spécifier le buck tq afin de ne pas pouvoir écrire nos styles entre les deux. Voici au moins où nous allons styliser ce genre de choses. Laisse-moi zoomer un peu. Pouvez-vous voir la suite ici et la fin consécutive ici. Je pense que c'est trop comme ça. Tu dois dézoomer. Très bien. Allons-y. Ici. Nous allons avoir un div, lui donner un nom de classe ou logo. Juste dans la définition, nous allons avoir une balise IMG, SRC equa, copier-coller le lien du logo Netflix directement depuis l'aide au code. J'ai déjà copié le lien. Retournez donc au Catawba, détachez-le de plus près avec l'étiquette à fermeture automatique. Ensuite, nous devons spécifier l'alternative que je vais proposer ici. Et je vais me connecter à Internet. Jetez un œil à Internet ici. Ça va ? Une fois cela fait, nous allons créer les tableaux juste à l'extérieur du div avec le nom de classe Logo. Nous allons faire une balade en bateau en cliquant sur ce bouton. Nous allons accéder à la page de connexion ou à la page d'inscription, en fonction de la page sur laquelle vous vous trouvez actuellement. Oui. Donc, si vous êtes prêt à vous inscrire, la page de connexion s'affichera en bas. Donc, si vous êtes prêt à vous connecter à la page, le bas indiquera l'inscription. Faisons donc d'abord ce nettoyage rapide. Tout en haut. Nous allons importer. Utilisez les navigations à partir de Devinez où se trouve le réacteur, après l'avoir fait, je vais faire des navigations. Nous allons avoir une variable appelée navigates. Acquérir, utiliser des navigations. Très bien, alors, en cliquant sur ce bouton, nous allons accéder à Ada, à la page de connexion ou à la page d'inscription, en fonction de la page sur laquelle vous vous trouvez actuellement. Alors, comment s'y prendre maintenant ? Je vais le faire ici, le régler sur notre fonction, puis accéder à, je vais faire des accessoires, des points. Et bien sûr, cette fonction doit également lui apporter des accessoires. Nous allons donc utiliser des accessoires pour modifier les fonctionnalités du bateau ainsi que le test. Donc, si la connexion par points props est égale à vraie, nous allons naviguer jusqu' à la connexion avec une barre oblique. Ainsi, dans l'ensemble de cette application, chaque fois que vous empruntez cet itinéraire, vous accédez toujours à la page de connexion pour l'afficher. Nous l'avons fait lors de la conférence précédente. C'est ici ? Oui, donc, chaque fois que vous empruntez cet itinéraire, vous accédez toujours à la page de connexion et au reste de l'itinéraire, ainsi qu'aux pages de présentation du composant correspondant. Alors visitez un autre site ici. Nous allons accéder à la page d'inscription, fermer le bouton en bas à droite, le bouton. Nous devons également modifier le test. Laisse-moi te montrer. Je vais faire ici Props Dot Login. Donc, si les invites de connexion par points sont égales à true, nous allons faire le test de connexion comme ceci. Connectez-vous. Oui. Sinon, nous allons changer le test et le bateau en signe. Rien de compliqué ici. Oui, commençons à styliser ce composant très rapidement. Mais ici, entre les deux régions arctiques, nous allons avoir un écran flexible. Justifiez le contenu. L'espace entre les éléments doit être aligné au centre. Le rembourrage va être l'objectif ultime de Sarah. Cela fait, nous devons styliser le logo. Le logo, nous devons styliser l'IMG, qui est la balise IMG qui affiche le logo. Ici, je vais faire de l'IMG, lui donner une hauteur de trois rem. Le pointeur est le plus grossier. Maintenant, stylisons rapidement le tableau. Sortez du corset, juste ici. Nous allons faire les deux en cliquant sur ce bouton. Donnez-lui un rembourrage, 0,5 rem. Et une jante. La couleur de fond, rendons-la rouge. La bordure sera connue sous le nom de pointeur caso. Les polices de caractères sur le bateau seront blanches, c' est-à-dire ce type ici, le login ou la connexion, borderradius. Faisons 0,2. Les gars, c'est exactement ma spécification. Vous pouvez donc décider de modifier le style final en fonction de vos spécifications ou de votre opinion. Le poids de la police va être le même. Rendons-la en gras. Et enfin, la taille de l'entreprise, 1,05, rem, magnifique. Enregistrer. Voyons rapidement ce que nous avons fait jusqu'à présent. Ouvrez l'application js. Juste à la sortie de la route. Nous allons afficher l'en-tête en haut. Il s'agit simplement, par exemple, de saké. Save indique que les accessoires ne sont pas définis. Ce que nous devons faire maintenant, c'est revenir à l'en-tête. Vous voyez que c'est censé être une invite, OK, Enregistrer. Ici, nous avons le logo, et ici nous avons la connexion. Ainsi, lorsque vous cliquez sur cette signature ici, vous allez être redirigé vers la page de connexion. Regardez-le de près. Nous sommes juste à côté de la page d'accueil, qui est la page Netflix. Maintenant, lorsque je clique sur la connexion, je jette un œil. Nous sommes maintenant redirigés vers la page d'inscription. L'idée est donc simple. Si nous sommes sur la page d'inscription, ce test sera modifié pour vous connecter. Donc, si nous sommes sur la page de connexion, le test contenu dans le bouton sera modifié pour vous connecter. heure actuelle, il se peut que vous ne puissiez pas bénéficier telles fonctionnalités simplement parce que nous n'avons pas implémenté la page d'inscription et la page de connexion. Faisons-le lors de la prochaine conférence afin que nous puissions avoir une page de connexion et d'inscription entièrement fonctionnelle. Rendez-vous lors de la prochaine conférence. 76. 74 page: Bon retour à tous. Dans cette conférence, nous allons créer la page d'inscription. Donc, directement dans le VS Code, ouvrons rapidement l'Explorateur, puis ouvrons le composant de page d'inscription aux pages. Ici, nous allons importer les fichiers nécessaires. Tout d'abord, nous devons importer la société Stout Pottstown à partir de composants Stout. Et ici, nous allons importer le composant d'en-tête réutilisable, importer l'en-tête depuis, Oups, nous devons cibler la barre oblique des composants , puis la tête IgA est aussi simple que cela. Encore une fois, nous devons également importer l'image d' arrière-plan du composant de base du sac réutilisable à partir de l'image d' arrière-plan de Components Slash. OK, encore une chose. Nous devons également importer le crochet américain , car nous allons nous en servir. Are, maintenant on peut y aller. Donc, ici, je vais effacer ça. Ensuite, je vais rendre la classe de conteneur. Nous devons maintenant faire const container equa stout dot d, puis spécifier le back tick. Ensuite, nous allons utiliser le CSS ici. Des amis. Je veux que tu prennes note de quelque chose ici. Tu vois ce type ici. Ils doivent être conformes à la convention de dénomination Pascal. Cela implique donc de mettre majuscule la première lettre de chaque mot. Voici la lettre majuscule C. Bien, non ? Dans le conteneur, nous allons louer de la classe d'image d' arrière-plan réutilisable plus près la classe d'image d' arrière-plan réutilisable grâce à l'étiquette à fermeture automatique. Nous allons donc avoir une division. Donnons-lui un nom de classe de contenu, n'est-ce pas ? Nous sommes dans le contenu, nous allons avoir l'en-tête réutilisable. Et ce que je vais faire maintenant, c'est spécifier la sonde de connexion ici. Laissez-moi vous montrer, ouvrez l'en-tête. Vous pouvez voir ici que nous prenons des accessoires, donc nous transmettons la connexion à ces composants. Donc, si la connexion props point est vraie, nous allons ouvrir la page de connexion. Un autre. Nous allons également ouvrir la page d'inscription aussi simple que cela ici Si la connexion par points est vraie lors du vote, nous afficherons la connexion. Maintenant, également dans le canotage, nous allons montrer un panneau. L'objectif est aussi simple que cela. Nous avons donc maintenant transmis ces sondes de connexion directement dans le composant d'en-tête. Enseigner, c'est bien, c'est beau. Très bien, nous allons avoir ici un div avec le nom de classe body. Et juste là où dans le corps nous allons avoir un autre div, donnez-lui un nom de classe de tests. Ensuite, nous aurons un tag Hadrien. Et je vais faire un nombre illimité de films, d'émissions de télévision et plus encore. Encore une fois, nous allons avoir un hit for tag. Et je vais faire quoi ? N'importe où, annulez à tout moment par une virgule. Encore une fois, nous allons avoir un hit six tag. Voici donc le résumé que vous pouvez voir sur la page de signature de Netflix. Oui. Nous ne faisons donc que copier à partir de là. Ensuite, je vais me préparer à regarder. Entrez votre e-mail pour créer. Redémarrez les droits d'adhésion, le div de fermeture avec le nom de classe test. Nous allons avoir une autre division, lui donner un nom de classe de mousse. Et dès la sortie de la mousse, nous allons avoir le même champ de saisie, le type, le mot de passe et l'espace réservé. Ce que je vais faire maintenant, c'est un mot de passe et le nom equa, mot de passe, c'est aussi simple que cela. Et, euh, un autre, un champ de saisie. Le type ici est égal à e-mail, l' espace réservé est égal à e-mail. Ou vous pouvez dire entrer une adresse e-mail ou quelque chose comme ça. Alors laissez-moi l' adresse e-mail, ops les gars. Bien. Sur le nom, e-mail égal. Fermez-le également à l'aide de l'étiquette à fermeture automatique. Quelle taupe. Maintenant, nous allons avoir deux boutons. Ici. Nous allons l'avoir acheté. Ce sera le vote Get Started. Surlignez et dupliquez. Ce sera le bouton d'inscription. C'est aussi simple que cela. Très bien, examinons le navigateur pour voir ce que nous avons fait jusqu'à présent. Viens ici, et je vais spécifier l'itinéraire pour t'inscrire, les inscriptions page oblique sont correctes. Voici le composant d'arrière-plan de l'image que nous avons rendu. Voici également l'en-tête que nous avons utilisé. Et ci-dessous, ici, ils écrivent n. Les champs de saisie. Voici le bouton Commencer, l'inscription, l'e-mail et le champ du mot de passe, tout est cool. Très bien. Il semble qu'il ne soit pas bien aligné. Oui, c'est simplement parce que nous ne l'avons pas stylisé. Stylisons donc rapidement ce composant pour qu'il soit beau. Revenez en arrière. L'idée ici est de placer tous ces éléments au-dessus de l'image d'arrière-plan. Comme vous pouvez le voir, l'en-tête se trouve juste en dessous de l'image d' arrière-plan. Donc, pour ce faire, nous devons spécifier la position relative, puis la position de ces gars sera absolue. Alors venez ici et je vais m'occuper de la position relative. Cela fait, le contenu, qui est ce type ici, pouvez-vous tout voir directement dedans ? Nous allons le rendre absolu afin qu'il puisse figurer juste au-dessus du composant d'image d' arrière-plan. Je sais que tu comprends de quoi je parle. Et en effet, un homme intelligent. Très bien, donc je vais m' occuper du contenu par points. Ensuite, nous allons avoir sa position absolue. Une fois cela fait, ce que nous allons faire ensuite, c'est le positionner à partir du zéro supérieur et du zéro gauche. Donc, quand je le ferai ici, nous allons le réduire à zéro lorsque vous enregistrerez le paiement sur le navigateur. Maintenant, nous avons tous ces termes ici, comme ceci. Tu peux voir ? Je vais le faire de gauche à droite. Mettons-le à zéro. Ainsi, lorsque vous observez l'écran, vous vous rendrez compte que la luminosité de l'arrière-plan est assez élevée. Oui, donc nous allons faire en sorte que cela soit un peu considéré. C'est donc ce qui apparaît en haut, peut être plus visible, comme celui-ci en haut ici. Donc, ce que je vais faire, c'est spécifier la couleur de fond. Et je vais faire du RGBA. Zéro virgule zéro virgule zéro virgule zéro points 79. C'est ma propre spécification, non ? Vous pouvez donc faire autre chose de votre côté. Lorsque vous enregistrez et quittez le navigateur. Vous voyez maintenant que nous avons des antécédents réputés. Laisse-moi te montrer. Enlevons-le à nouveau. Enregistrer. Lorsque vous rechargerez, vous vous rendrez compte que l'arrière-plan devient si clair. Donc, quand vous libérez ce type, Save, maintenant, cela devient un peu considéré, mais il apparaît en haut de la page pour l'instant. Vous voyez ? Je ne sais pas si vous pouvez les voir. D'accord. Stylisons-le pour l'adapter à l'écran. Donnons-lui une hauteur. 100 vh, la largeur 100 vh. Et vous pouvez vous rappeler qu'il s'agit la dimension réelle de l'image d'arrière-plan réutilisable. Nous l'appelons donc simplement ici pour l'adapter à l'écran de l' image d'arrière-plan lorsque vous enregistrez dans le navigateur. Nous avons toujours quelque chose comme ça. Et je ne sais pas pourquoi. Oups, c'est censé avoir une largeur de vue de 100 comme ça. Et vous pouvez vous rappeler qu'il s'agit la dimension réelle du composant d' image d'arrière-plan réutilisable. Oui, nous l'apportons donc ici pour qu'il s'adapte à l'écran, enregistrez, consultez le navigateur ici. C'est encore une fois ? Laissez-moi vous montrer ce que fait ce type quand il a commenté Save. Vous pouvez maintenant vous rendre compte que l'arrière-plan devient vraiment lumineux. Quand tu économises. C'est un peu comme un bâtisseur. Et c'est exactement ce que nous recherchons. Je vais donc créer ici des colonnes de modèles de grille, attelage 15 V et 85 V. H. Maintenant, dialysons le corps. Le corps. Laissez-moi vous montrer ici, est-ce juste à l'intérieur du corps ? Nous allons avoir un écran flexible. Et la direction de flexion est le côlon. Justifiez le contenu pour qu'il soit centré, alignez les éléments au centre. Lorsque vous enregistrez, tout sera aligné au centre. Pouvez-vous voir maintenant le logo a été aligné sur le coin supérieur gauche de l'écran. Ici, le bouton de connexion a été aligné sur le coin supérieur droit de l'écran. Et lors de la conférence précédente, je vous ai dit que lorsque vous serez sur la page d'inscription, le bouton de connexion s'affichera. Lorsque vous serez sur la page de connexion, ce bas sera modifié pour vous inscrire. Je pense que nous l'avons fait dans la conférence précédente directement dans le composant d'en-tête ici. Donc, lorsque vous utilisez ces accessoires ici, tout fonctionne mieux. Ce type est là. Cela signifie donc que nous avons transmis les sondes de connexion à l'en-tête. Donc, ici, cela montre que les invites de connexion par point sont égales à vrai. Donc, ce bouton situé en haut à droite du vote sera modifié pour vous connecter et un autre, il changera pour vous inscrire. Mais laisse-moi te montrer rapidement. Viens ici. Nous allons nous inscrire. Ainsi, lorsque vous enregistrez l' application, le paiement, le navigateur, vous pouvez voir maintenant que nous avons conçu lors du vote. C'est aussi simple que cela. Laissez-le donc comme identifiant pour le moment. Continuons avec le style. Pour le test. Nous allons avoir un écran flexible. La direction de la flexion est la colonne. Je vais donc simplement copier à partir d'ici comme ça , puis le coller ici. La taille de la police. Passons à travers la jante. La couleur des téléphones sera blanche. Sortons-le sur le navigateur. Vous voyez que tout est bien aligné, le centre. OK, faisons quelque chose ici. Nous devons supprimer le contenu de justification pour le centrer. Ensuite, je vais aligner le texte. Center met en forme le code, enregistre l'application. Et maintenant, ils sont au centre. C'est bon. D'accord. Le nid, c'est la plaque d'identification. Donc, si je touche une étiquette, le rembourrage aura 0,25 place pour l'attache pour l'étiquette. Pour. Nous allons donc spécifier la marge en haut. Et je vais le porter à -1,5 rem. Enlevons-le pour que vous puissiez le voir clairement. Appuyez sur un commentaire en toute sécurité. Vous voyez que je n'aime pas les espaces entre les tests. Tu vois que ça n'a pas l'air de lignes ? Donc, comment résoudre ce problème est d'appliquer la marge supérieure. Et je veux aussi que l'émission de télévision soit diffusée. Donc, pour le rembourrage, je vais retirer le 0,25 rem. Je vais donc lui donner 0,25 rem. Bien. H6. Le F6 à succès se situe exactement au même sommet de marge de dividende , donc il peut se rapprocher. Tout est beau. Très bien, commençons donc à styliser le champ de saisie, y compris le bas. Donc, ici, je vais faire le formulaire de Dodds. Nous allons avoir une grille d'affichage. Spécifiez une largeur de 60 %. D'accord ? Nous devons également spécifier les colonnes du modèle de grille. Mais laissons cela pour le moment. Nous allons donc ici styliser l'entrée visualisée, la couleur. Faisons en sorte qu'il soit noir. Pardon ? 1,5 m La taille de la police, 1,2 rem. Et la largeur de ce champ de saisie sera de 45 rem. Vérifions-le sur le navigateur. Enregistrer. J'adore ça. Voici donc les deux champs de saisie. Ne t'inquiète pas pour le bouton. Nous n' y sommes pas encore parvenus. chose importante que nous devons également faire est de vous montrer un œil concentré sur le champ de saisie. Vous en verrez les grandes lignes. Vous voyez le contour bleu. Ce n'est pas ce que je veux. Donc, ce que je vais faire pour l' instant, c'est en fonction des prévisions. Nous allons supprimer le contour juste pour le rendre non, c'est aussi simple que cela. Je ne l'ai donc pas fait. Stylisons rapidement le corps. Donnez-lui un rembourrage de 0,5 rem, une lecture sur le bord pour terminer avec le point-virgule , puis la couleur de fond. Faisons en sorte qu'il soit rouge. La frontière va être engourdie, plus grossière. Faisons en sorte d' économiser et de voir ce que nous avons. OK, finissons-en maintenant. La couleur, laissez-moi vous montrer la couleur des droits de police. Mais dans le canotage, par exemple, ils commencent à s'inscrire. Faisons en sorte qu'il soit blanc. La taille de la police. Augmentons-le un peu. 1,05 rem. Et la largeur du bord est de cette embarcation. Enregistrer. Jetez-y un coup d'œil. C'est vrai. Mais ce ne sont pas les résultats escomptés. Nous devons donc maintenant obtenir le résultat escompté. Ce que nous allons faire, c'est surligner le champ du mot de passe et afficher l'e-mail lorsque l'utilisateur saisit l'e-mail et lance l'arrêt Get Started. Le champ du mot de passe apparaîtra et le bouton d'inscription apparaîtra également . Permettez-moi de le répéter. L'intention est de masquer le champ du mot de passe et le bouton d'inscription. Donc, dans un premier temps, vous allez voir le champ e-mail n, le bouton Commencer. Ainsi, lorsque vous saisissez votre e-mail et que vous appuyez sur le bouton Commencer, l'e-mail et le bouton Commencer disparaissent. Ensuite, le champ d'inscription et le champ du mot de passe apparaîtront. Laissez-moi vous montrer ce que je veux dire par là. Alors faites défiler la page vers le haut. Nous devons maintenant le mettre en œuvre. Ce que les États-Unis, souvenez-vous, nous avons importé les États-Unis l' ont fait plus tôt. Nous devons déclarer les variables d'état nécessaires à utiliser. Nous allons l'appeler Show Password. Les sets de karma affichent le mot de passe pour utiliser la scène. Donc, l'état initial va être faux, comme ceci. Maintenant, conditionnons le champ de saisie. Ouvrez les crochets bouclés. Donc, si votre mot de passe est égal à, nous allons afficher le champ du mot de passe. Donc, ce que je vais faire, c'est copier le champ du mot de passe comme si ces surlignements étaient capturés, puis le coller entre les deux. Sinon. Nous allons afficher le champ e-mail, le couper et le coller ici. C'est aussi simple que cela. Lorsque vous enregistrez le paiement dans le navigateur, vous ne voyez plus le champ du mot de passe. Oui, vous devez donc saisir quelque chose, n'est-ce pas, à mettre dans le champ e-mail et appuyer le bouton Commencer pour que le champ du mot de passe apparaisse. est aussi simple que cela. Maintenant, appuyons sur une condition sur les boutons pour que tout commence à fonctionner parfaitement comme prévu. Formatons rapidement le code. Ici. Nous allons avoir un autre support bouclé. Je vais le faire. Si le mot de passe affiché n'existe pas. Nous allons montrer comment commencer à voter à chaud et le coller ici. Maintenant. Nous allons afficher le bouton d'inscription. Lorsque vous enregistrez dans le navigateur. Maintenant, tout apparaît comme ceci, mais nous voulons également qu'il apparaisse dans le coin supérieur droit du champ de saisie. Maintenant, viens ici. Laissez-moi vous montrer ce qu'il nous reste, ce qu'il nous reste , à droite, dans la mousse. Nous devons spécifier les colonnes du modèle de grille, un crochet de colonne, des parenthèses et un crochet bouclé juste entre les deux. Je vais donc afficher le mot de passe. Si Afficher le mot de passe est vrai. Ici, nous allons avoir une flèche F, puis ici nous allons en avoir une pour, nous essayons de partitionner les colonnes et les erreurs. Nous n'avons pas besoin d' DEMANDER un pour lorsque vous enregistrez et payez dans le navigateur. Et ce sont ceux-ci, pouvez-vous voir que tout apparaît comme prévu, parfaitement en bon état. Alors laisse-moi essayer de saisir mon e-mail. Je saisis mon e-mail, puis je clique sur le bouton Commencer. Pour l'instant, rien ne se passe. OK, revenons donc en arrière et implémentons le OnClick pour commencer à voter. Tout va bien, jusqu'à ce que nous ayons le bouton Commencer. Je vais donc cliquer sur le bouton Commencer. Nous allons changer l'état initial en vrai, n'est-ce pas ? C'est donc plutôt une sorte d'ambiance vraie ou fausse en ce moment. Je vais donc maintenant implémenter le bouton onclick sur le bouton Commencer. Cliquez sur ce tableau dans. Nous allons appeler la fonction de configuration pour mettre à jour les états initiaux définis. Afficher le mot de passe. Nous allons définir l'état initial, le vrai. Nous allons donc mettre à jour les états initiaux à vrai. Dans ce cas, ce type est là. Je vais donc cliquer dessus, pour commencer à voter. Nous changeons l'état en vrai, puis le bouton d'inscription apparaîtra. C'est aussi simple que cela. Maintenant, nous devons nous rafraîchir. Permettez-moi de nettoyer mon e-mail et de commencer. Voyez-vous que lorsque vous cliquez sur le bouton Commencer, le champ du mot de passe apparaît également sur le bouton d'inscription. Vous pouvez saisir ici votre mot de passe. Alors, mes amis, c'est ce à quoi nous nous attendons dans cette conférence. De plus, je veux vous montrer quelque chose que j'ai fait coulisse et dont vous n'êtes pas au courant. Quand consultez-vous cette page ? Pouvez-vous voir où commence mon logo Netflix ici ? J'ai aussi un peu d'espace ici. J'ai un peu d'espace entre les deux. C'est simplement parce que, à vrai dire, pour mettre dans l'en-tête, j'ai spécifié un rembourrage d'un rem. Donc, lorsque vous supprimez cette partie ici et enregistrez le projet, revenez en arrière. Désormais, vous n'avez plus d' espace entre le logo Netflix et le bas. Donc, les lignes ne ressemblent pas à ça. C'est la raison pour laquelle j'ai placé un patron ici pour qu'il soit filaire. Maintenant tu peux le voir, ça a l'air magnifique, tout est cool. J'adore ça. Donc, la France. Dans la prochaine conférence, nous allons commencer à créer la page de connexion. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 77. 75 Connexion: Bon retour à tous. Dans la conférence précédente, nous avons mis en place la page d'inscription. Et pour le montrer, c'est extrêmement beau et je l'aime bien. Dans cette conférence, nous allons donc créer la page de connexion. Allons-y rapidement. Je n'ai pas eu à coder VS. Je vais définir les années de connexion à peach.genome, puis ouvrir la page d'inscription. Nous devons copier presque tout à partir d'ici, comme ceci, qui est le copier-coller impulsif . Oui. Alors, encore une fois, nous allons avoir un emballage ici. Et je vais le faire à partir d'ici. Pour plus de lisibilité. Emballage égal à stout point dV. Spécifiez ensuite la case retour. Il a au moins eu un style CSS qui aura lieu. Cela fait, je vais effacer tout cela et ensuite nous aurons un nœud parent appelé wrapper, qui est ce type ici. La ligne Nesta vise à rendre les composants réutilisables de l'image d'arrière-plan. Alors maintenant, voyez-vous à quel point un composant réutilisable peut être utile ? Faisons-le également apparaître ici. Nous allons rendre le composant réutilisable de l' en-tête. Mais avant de continuer, nous allons avoir une discussion ici. Donnez-lui un nom de classe pour le contenu de connexion, comme celui-ci. Directement en DVD. Nous allons effectuer le rendu du composant d'en-tête. Et toutes ces épreuves. Nous les avons importés plus tôt. Nous copions simplement l'entrée de la page d'inscription lorsque vous enregistrez. OK, vérifions-le dans le navigateur. Viens ici. Ainsi, lorsque vous cliquez sur cette connexion, en bas à droite, nous sommes sur la page d'inscription. Il va vous rediriger vers la page de connexion. Et laissez-moi vous montrer où nous l'avons mis en œuvre. Viens ici, fais défiler un composant vers le haut et vers le bas. Nous spécifions donc ici le OnClick. Si la connexion par point prop est vraie, cela vous redirigera vers la page de connexion. Et lorsque vous consulterez la page d'inscription, vous vous rendrez compte que les accessoires sont connectés. C'est aussi simple que cela. Maintenant, lorsque nous cliquons sur ce bouton, cela nous amène à la page de connexion, puis à la page d'inscription, connectez-vous. Et ici, nous avons rendu le composant réutilisable d'arrière-plan. Et ci-dessous se trouve le composant d'en-tête. Ne vous inquiétez pas, lorsque nous commencerons à styliser l'obligation, tout ce qui se trouve dans le contenu sera placé en haut du composant réutilisable de l'image d'arrière-plan. Continuons rapidement. Désolé, juste après l'en-tête. Nous allons avoir un div avec le nom de classe firm. L'entreprise, nous allons avoir un autre div avec le nom de classe de l'outil et le bon mot dans le titre. Vous allez avoir une énorme étiquette ici. Et je vais faire la journalisation de la manière la plus simple qui soit. Très bien, donc juste après le div de clôture du nom de classe title, nous allons avoir un autre div. Donnez-lui un nom de classe de conteneur, n'est-ce pas ? Pour rapprocher le div du conteneur, nous allons rapprocher les champs de saisie, type de saisie, les textes obligatoires le type de saisie, les textes obligatoires et la balise à fermeture automatique. Ici, je vais créer un espace réservé égal à un e-mail. Vous vous rendrez donc compte que j'ai utilisé des guillemets doubles et des guillemets simples. Cela n'a pas nécessairement d'importance. Oui, alors continuons rapidement. Mais je vais maintenant dupliquer ce champ de saisie, le surligner dupliquer ce champ de saisie, le et le dupliquer. Ensuite, je vais remplacer celui-ci par mot de passe, car il sera utilisé pour le champ du mot de passe. Ici, je vais saisir le mot de passe juste après le champ de saisie, nous allons avoir un bateau c'est le bouton de connexion lui-même. Très bien. Lorsque vous enregistrez dans le navigateur, c'est ici, n'est-ce pas ? Donc, pour le moment, nous devons styliser les composants pour leur donner une belle apparence. Ici, la position du wrapper sera relative qui nous permettra de placer ce contenu de connexion juste au-dessus de la classe d'image d' arrière-plan , de sorte que tous ces contenus apparaissent juste en haut de l'image d'arrière-plan. Je continue donc à expliquer ces choses encore et encore simplement parce que je veux que cela reste gravé dans votre mémoire. Nous allons donc ici styliser le login contenu. Il suffit de copier le contenu de la connexion par points , d'ouvrir et de fermer le crochet bouclé. Maintenant, la position sera la suivante : devinez quoi ? Absolus. Donc, de haut en bas, mettons-le à zéro. De gauche à droite. Mettons-le à zéro. simplicité, nous allons donc conserver tout ce qui se trouve dans le contenu, juste au-dessus du composant d'image d'arrière-plan. Et le voici. Pouvez-vous voir maintenant que tout se trouve juste au-dessus du composant d' image d'arrière-plan. Très bien, donnons-lui une hauteur de vue de 100. Et, euh, nous avons également une largeur de vue de 100. Et c'est sûr que le contexte sera le même. Il me suffit donc d'aller sur la page d'inscription, puis de faire défiler la page vers le bas. Je vais tout copier ici. Nous n'avons pas à perdre de temps à refaire ces bâches encore et encore. Je suis désolée pour ça. Je dois juste le faire au début, mais ça ne m'est pas venu à l'esprit. Enregistrez dans le navigateur. Bien. Bien, une fois cela fait, nous devons styliser le contenant ferme. Donc, ce que je vais faire maintenant, c'est juste après le composant d'en-tête, nous allons créer un autre div, lui donner un nom de classe de la forme Dodge wrapper. Donc, tout est là, copiez depuis les lignes 152, les lignes 20. Maintenez la touche Option enfoncée sur le Mac , puis appuyez sur la flèche vers le haut pour la déplacer. Si cela ne fonctionne pas pour vous, vous pouvez le faire aussi. Surligne puis contrôle X pour couper, collez-le dans le div avec le nom de classe Form Wrapper. Lorsque vous enregistrez, nous devons maintenant styliser le Form Wrapper. Dodds, moi, je vais vous montrer ce type. Copie plus souple. Nous allons avoir un écran flexible. La direction de flexion est celle de la colonne. Alignez les éléments au centre, justifiez le contenu pour centrer l'espace. Ce sera pour atteindre les sommets. Mettons-le à 85, 85 v. h. D'accord, sortons-le sur le navigateur. Vous ne le voyez peut-être pas clairement, mais en ce moment, ce haut prend progressivement forme. Très bien, alors dialysons le point ferme. Je vais vous montrer le formulaire. Ce type est là. J'ai juste copié et collé. OK, nous allons avoir un affichage flexible, une direction flexible, une colonne, un centre d'alignement des éléments, un centre de contenu justifié. Donc, ce que je vais faire maintenant, c'est tout copier à partir d'ici. Je vais copier les lignes 44 à 48. Copiez-le et collez-le ici. Enregistrer. Jetons un coup d'œil au formulaire. Tout ressemble à la même inquiétude. Nous allons l'améliorer. Donc, la couleur de fond du formulaire. Maintenant, je vais le faire en six. Sois zéro. Comptons 123456 le sont. Alors laissez-moi enregistrer et consulter le navigateur. Vous pouvez voir que c'est ce que nous venons de faire en ce moment. Ce gars ici, je ne sais pas si tu peux le voir clairement. Revenons en arrière. D'accord. Je vais faire quelque chose pour que cela apparaisse clairement ici. Je vais juste faire 0.1. D'accord ? Vous voyez, c'est exactement ce dont nous parlons. Remets-le à la scène réelle. Exprimons le formaldéhyde à 70 v h. Maintenant, il va apparaître clairement. Le rembourrage est destiné à courir. La couleur sera blanche pour que le test au sein de l' entreprise apparaisse en blanc. Et, euh, encore une fois, donnons-lui un rayon de bordure. Nous voulons que le bord soit un peu sinueux. Donc je vais mettre zéro point en cas de pluie. Jetez-y un œil lorsque vous enregistrez dans le navigateur. Et le voici. Vous voyez maintenant que l'entreprise est prête. La ligne terminologique suivante consiste à styliser le champ de saisie et la navigation. Et j'espère que vous pouvez le voir clairement dès maintenant. Le nid est de styliser ce contenant. Nous pouvons donc empaqueter le conteneur de points du champ d'entrée. Et assurez-vous toujours que l'orthographe du nom de votre cluster est correcte. D'accord. Flex de l'écran. Direction de la flexion, colonne, espace. Allons-y. Je pense que c'est tout pour le contenant. Ciblons donc le champ de saisie. Nous avons ici les imputes. Je vais vous le montrer dans un GP qui fait défiler la page vers le haut. Voici le div avec le nom de classe du conteneur. Et juste à l'intérieur du conteneur, nous avons les champs de saisie. Nous allons donc cibler les champs de saisie dès maintenant, puis les styliser. Donnez le rayon de bordure du point zéro pour marge de 0,5 rem. Ici, nous allons avoir une chambre. La largeur est de 25 pièces. La hauteur sera de 3,4. Sauvegardons donc et sortons dans le navigateur. L'idée est, voyez-vous, ça a l'air tout à fait correct. Je les adore. Absolument. Ça a l'air sympa. D'accord. Encore une fois, nous devons arrêter le mode hors ligne. Pouvez-vous voir quand je répondrai à mes besoins en matière de console, vous verrez ce contour bleu. C'est donc assez facile à faire. Je vais faire les grandes lignes. Faisons-en neuf. Sûr. Ici, sur le navigateur. Lorsque vous replacez votre souris dessus, elle apparaît bien. Dissocions donc du verrou et du vote de connexion. Pour le bouton. La séparation sera de 0,5. Rem. Oups, je continue à le faire. Je ne comprends pas. Va-t'en. La couleur de fond. Cela peut être aussi simple que cela. Bordure. Aucune. Le plus grossier est le pointeur, le rayon de la bordure étant le point zéro. Nous devons lui donner un rayon de bordure identique à celui du champ de saisie. Donc je vais juste copier que ce gars mesure 0,4 m. OK, voyons voir. Bien. Maintenant, nous allons lui donner un point de hauteur et un point de largeur. C'est pour lui. La couleur sera le blanc, c' est-à-dire la police, le test écrit dans le corps du texte. Laisse-moi te montrer ce gars ici. Et ce que nous allons faire. Tweet amusant. Je vais augmenter la taille de police. Pour le porter à 1,05 rem. Je pense que c'est tout pour le moment. Sauvegardons-les et sortons-les dans le navigateur. Tout se passe comme prévu, et je les adore. Maintenant, lorsque vous observez le coin supérieur droit de l'écran, vous vous rendrez compte que le bas indique la connexion. Donc, lorsque vous cliquez sur ce gars ici, il vous redirigera vers la page d'inscription. Hé, est-ce que tu peux le voir ? Et maintenant, nous allons voir se connecter. Lorsque vous cliquez sur le bouton Connexion, vous êtes redirigé vers la page de connexion. Et bien sûr, c'est là que nous l'avons mise en œuvre. Vous pouvez donc parcourir les cours pour bien le comprendre et vous en souvenir. Voyons donc s'il y a quelque chose à faire ici dans les composants de connexion ou sur la page de connexion. Donc, je pense que tout va bien, non ? Voilà, c'est tout pour le moment. Et dans la prochaine conférence, nous commencerons à implémenter l'authentification à l'aide des abeilles de feu. Et je peux vous assurer que ce sera un plaisir de vous voir lors de la prochaine conférence. 78. 76 Correction de connexion: Très bien, donc avant de procéder à l'inscription et à l'authentification de connexion, je tiens à vous faire part de quelque chose. Si vous observez l'écran, vous vous rendrez compte que le formulaire n'est pas visible. Ce n'est pas très visible comme prévu. Tu peux voir ? Il va être très difficile de remarquer qu' il y a quelque chose ici. Nous allons donc corriger cette énergie v. Une autre observation importante que je tiens à porter à votre attention concerne l'entrée vue, la hauteur est trop élevée. Oui. Nous devons donc trouver un moyen de réduire la taille et de rendre l'entreprise un peu plus handicapée qu'auparavant. Revenez au code VS, faites défiler la page vers le bas. Donc, pour le champ de saisie, c'est extrêmement facile à faire. Il suffit de réduire la hauteur à 2,4 RAM. Pouvez-vous voir maintenant qu'il apparaît en version bêta. Travaillons donc sur le contexte et sur l'entreprise. Ce que je vais faire, je vais le souligner. Permettez-moi de vous montrer le contenu de connexion. Je vais le souligner. Ensuite, avant de continuer, je veux les changer en 0.4. Faites défiler le formulaire vers le bas. Je dois juste effacer ce gars et le coller. Je vais donc le changer à trois lorsque vous enregistrerez et que vous consulterez le navigateur. Et le voici. Vous voyez, maintenant, cela semble un peu plus visible qu'avant. Mais un autre problème, c'est que l'arrière-plan est de plus en plus clair et non, nous ne voulons pas qu'il en soit ainsi . Allons-y donc et abordons le contexte ici. Mettons-le à 0,6 et voyons quel est le résultat. Bien. Passons à la prochaine conférence où nous allons commencer à implémenter l'authentification de connexion. On se voit alors. 79. 77 Mise en page: Bon retour à tous. Très bien, donc dans cette conférence, nous allons lier notre projet à Firebase. Donc, pour continuer, nous devons d'abord installer Firebase directement dans notre projet. Accédez donc à VS Code, droite, en portant le terminal. Assurez-vous auprès des clients C, D. Et puis NPM installe Firebase. Appuyez sur la touche Entrée pour le faire démarrer. Installé. Réussi. Ouvrons donc le fichier package.json. Et le voici. Ici. Nous avons maintenant installé Firebase avec succès. Alors rendez-vous rapidement sur la console Firebase et créons une nouvelle application. Firebase. Vous pouvez donc accéder à firebase.google.com , puis cliquer sur le bouton Commencer. Ajoutons un nouveau projet. Je vais donc appeler cela des projets Netflix , puis continuer. Encore une fois. Continuant. Ici, nous allons le laisser comme compte par défaut pour Firebase. Laissez-moi vous montrer que cliquez ici, vous allez voir créer un nouveau compte, puis sélectionner le compte par défaut pour Firebase. Créez ensuite un nouveau projet terminé. Et maintenant, nous avons créé un nouveau projet. Nous devons continuer. Et ici, nous allons sélectionner le composant basé sur le Web. Oui, donc nous allons sélectionner ce type ici. Créons un composant Web. Et maintenant, nous allons donner un nom à l'application. Application Netflix. Vous pouvez décider de configurer hébergement Firebase pour ce projet. Mais ne t'inquiète pas, peut-être que nous le ferons plus tard. Maintenant, cliquez sur S'inscrire. Cela fait, ce code sera généré ici. Maintenant, revenez au code VS, accord, pour apporter le SRC, il vous suffit de l'ouvrir. Et puis vous tillez, cliquez avec le bouton droit sur utils, créez un nouveau fichier. Et je vais l' appeler Firebase Dash. Le point g de configuration est arrivé ici. Il suffit de sélectionner comme ça. prie. Vous pouvez voir ce que j'ai sélectionné ici. Alors. Cliquez avec le bouton droit Copie. Collez-le ici comme ceci. Oui, donc après avoir fait cela, nettoyons le code. Sélectionnez parmi les lignes deux lignes pour l'effacer. De plus, nous n'avons pas besoin de Firebase Analytics pour le moment. Il suffit de l'effacer. Essuie ça aussi, essuie ça. Une fois cela fait, la prochaine étape consiste à importer des objets provenant de perles de feu. Alors faites défiler la page vers le haut. Et je vais m'occuper des importations. Oubliez les statistiques les plus simples de Firebase. Et enfin, juste en dessous, nous devons exporter ce module. Je vais participer à une compétition sportive, Firebase of Equa. Descends. Ensuite, nous allons vous transmettre l'application ici même. C'est aussi simple que cela. Nous avons donc réussi à lier le projet à Firebase. Alors rapidement, laissez-moi vous présenter la console Firebase afin de vous familiariser avec elle. Notez donc que nous avons copié ce modèle ici. Oui. La prochaine étape consiste donc à continuer à console. Dans le coin inférieur gauche de l'écran, vous allez voir ce bouton continuer à accéder à la console. À droite, nous sommes dans la console. Vous devez ouvrir la Butte puis vous authentifier. Cliquez sur Commencer. Cliquez donc sur la barre oblique du mot de passe de l'e-mail. Nous devons donc activer ici, puis Enregistrer. Très bien, vous allez donc voir ce vert ici. Et puis, encore une fois, passez à nous utiliser. C'est exactement ici que tous les utilisateurs seront stockés, d'accord ? Lorsqu'un utilisateur se connecte à notre obligation, ses informations d'identification sont stockées ici, ce qui implique le mot de passe et l'e-mail. C'est le plus simple. Très bien, c'est tout pour le moment. Et lors de la prochaine conférence, nous commencerons à implémenter la page d'inscription. Ensuite, l'utilisateur pourra s'inscrire à notre projet et commencer à se connecter. C'est aussi simple que cela. 80. 78 CreateUsers: Bon retour à tous. Très bien, passons à la page d'inscription. Contre Code. La page d'inscription point j est à notre droite est définitive. Donc, juste au sommet. La première chose que nous allons faire est d'importer la configuration Firebase Dash, qui est le module que nous avons créé lors de la conférence précédente. Laisse-moi te montrer rapidement ce type. OK, alors viens ici et faisons-le ici. Nous allons importer Firebase depuis les pieds Slash Firebase DashCon d'UT. Alors, ce gars ici, je vais vous le montrer. Oui, tu comprends toutes ces choses. Je ne l'ai pas fait. Importons certains des éléments que nous allons utiliser. Pour y parvenir, nous devons suivre les meilleures pratiques. Laisse-moi faire quelque chose. Je vais souligner les lignes deux à trois. C'est fait, viens ici et colle. Ce seront donc les entrées que nous avons créées, mais ce sont les premières qui seront les entrées des bibliothèques externes. Donc, ici, je vais faire des importations, créer des utilisateurs avec un e-mail et un mot de passe provenant de Firebase , et me lancer également. Nous devons importer les modifications activées et désactivées. Exactement comme ça. Créons rapidement le gestionnaire pour l'inscription. Hé, je vais faire const, handle, sign-in, equa, régler notre fonction. Donc, ici, nous allons avoir un async. Bien. Donc, juste à l'intérieur, nous allons l' emballer dans un bloc Try Catch. Ici. Je vais créer un e-mail , un mot de passe. Et je vais le régler sur des valeurs à partir de valeurs. Donc, avant de continuer, créons rapidement les variables d'état nécessaires à utiliser. Alors je vais faire le récit. Ils utilisent un extrait de données à partir d' une valeur, définissent les valeurs du téléphone. OK, voici une coupe définie à partir de valeurs. L'état initial va être un objet. Et directement dans les objets, je vais envoyer des e-mails. L'e-mail. Nous allons le définir comme une chaîne vide. Oui, donc l'état initial du champ e-mail sera vide. Oui, donc le champ du mot de passe, ainsi que l'état initial , seront une chaîne vide, ce qui le rend vide. Ça va ? Ceci étant fait, continuons avec les valeurs du formulaire ici. Ici, nous allons passer à notre largeur puisqu'il s'agit d'un asynchrone, donc cela va renvoyer une promesse. Nous devons donc attendre ici. Nous allons appeler la méthode de création d'un utilisateur avec e-mail et mot de passe. Nous l'avons importé. Je vais vous montrer le sommet depuis Firebase off. Donc, dans le cadre de cette méthode, nous allons intégrer la Firebase d'un e-mail de coma, passe plus calme, aussi simple que cela. Et ici, nous allons détecter l'erreur nécessaire. Ainsi, lorsque nous détectons l'erreur, nous devons l'enregistrer sur la console. Je vais faire console.log. Ce type est là , c'est une erreur. En cas d'erreur ou de problème, nous allons l' enregistrer sur la console. Oui, donc maintenant, nous devons implémenter toutes ces tâches difficiles, est-ce pas, dans le champ de saisie. Voici donc le champ du mot de passe. La valeur à partir des valeurs, des points, du mot de passe. Cela permettra donc de récupérer le mot de passe saisi par l'utilisateur, droits se trouvant dans le champ. Tellement inchangé. Cela signifie donc que l'utilisateur commence à taper dans le champ de saisie. Cela nous donnera donc accès à l'événement, puis le définira comme notre fonction. Lorsque l'utilisateur commence à saisir du texte dans le champ de saisie, nous devons mettre à jour l'entreprise. Maintenant, je vais faire un set à partir de valeurs. Nous devons donc diffuser différentes valeurs. Cela fait, nous allons créer point E, une cible et un nom de point. Enfin, nous allons faire un point pour cibler cette valeur. Nous devons tout copier à partir de la valeur comme celle-ci. copie des lignes 42 et 43 se trouve dans le courriel. Donc, dans le champ e-mail, nous allons coller. Mais maintenant, nous devons remplacer la valeur ferme par e-mail. Le plus simple que de l' avoir fait. Nous devons appeler la fonction de connexion humble lorsque vous cliquez sur le bouton d'inscription. Nous allons donc spécifier ici le clic et le clic de ce boulonnage. Je vais me connecter en main propre. Vous pouvez maintenant voir que la fonction est enregistrée. La couleur de la police devient si nette, antique. Mais quand vous venez ici, par exemple, supprimons. Fais une bêtise. Tu vois ? Très bien, tout est cool. Enregistrez l'application et testons-la. Nous allons faire en sorte que npm commence à arrêter le projet. Je préférerai donc faire glisser la Firebase ici pour que l'application soit là. Très bien, passons à la page de connexion. Mon e-mail va être un énorme mistake@gmail.com. Cliquez sur Commencer. Le mot de passe. Je vais faire 123, ABC. Inscris-toi. Sortons-le. Si vraiment, nous nous sommes inscrits. Nous devons actualiser la console ici pour voir. Les gars, tout fonctionne comme prévu. Vous voyez maintenant que c'est tech@gmail.com ? Tout est cool. Très bien, la ligne suivante consiste donc à rediriger l'utilisateur vers la page d'accueil lorsqu'il se connecte et se déconnecte. Ainsi, une fois connecté, lorsque les informations d'identification sont correctes, lorsque vous cliquez sur le bouton d'inscription, l'application devrait être en mesure de vous rediriger vers la page d'accueil, qui est la page Netflix. Retournez à VS Code et ici, faites une bêtise. Donc, tout en haut, nous allons importer c'est quoi ce bordel ? Un simple effleurement. Enregistrer. Maintenant, revenons en arrière et vérifions-le à nouveau. Je veux que nous soyons précis ici. Supposons que Mike ajoute gmail.com, lancez-vous. Mot de passe, un, deux, trois, ABC. Tu ne t'inscris pas. Revenez à la console, actualisez. Bien. Cela fonctionne toujours comme prévu. Cette contribution n'est donc pas nécessaire. Oui, maintenant nous devons importer, utiliser, naviguer depuis React, routeur Doom. Et après cela, nous allons faire des navigations constantes. Le CWA, utilisez les navigations. Bien sûr, c'est une fonction. Oui. Maintenant que c'est fait, venez ici et configurons l'authentification. Je vais le faire en cas de changement d'état. Je vais vous montrer ce gars que nous avons importé depuis Firebase off. En fait, nous effectuons l'authentification ici. L'état marche/arrêt a changé. Nous allons utiliser Firebase Coma, puis nous allons transmettre l'utilisateur actuel. Cela vous aidera donc à vérifier l'utilisateur actuel qui s'est connecté. Ainsi, lorsque l' utilisateur actuel se connecte, il est redirigé vers la page d'accueil, qui est la page Netflix. Quelle est exactement l' intention ? Ici ? Nous allons mettre un frein à cela. Donc, je vais le faire en tant qu'utilisateur actuel, donc s'il y a une nouvelle inscription, oui. Nous allons accéder à la page d'accueil. Ne vous inquiétez pas, je vais vous expliquer cela en GeV. Utilisez Navigate. Naviguez. Les gars, modifions-les pour naviguer. Ça sonne mieux. Naviguez. Nous allons donc faire des navigations après avoir saisi votre e-mail et votre mot de passe. Nous allons donc vérifier ici si l'utilisateur actuel, si vous êtes l' utilisateur actuel qui s' inscrit directement depuis cette page, sera redirigé vers la page d'accueil. Et t'inquiète, on va le faire dans le Jiffy pour que tu puisses le voir. Ainsi, lorsque nous indiquons ce conflit ici, cela signifie que vous serez redirigé vers la page d'accueil. Tu vois Slash ? Cela signifie que vous allez être sur la page Netflix. Ici, il est dit que l'identification notre utilisateur navigue a déjà été déclarée. Voyons ce qui se passe ici. Naviguez de la même manière, utilisez, naviguez, les gars , écoutez, nous avons foiré quelque chose ici. Nous devons effacer tout ça. Et j'en suis désolée. Écriture Safe Harbor utilisée. Il est défini mais n'est pas utilisé. Pourquoi est-il utilisé ? Probablement pas dans cette page qui se trouve dans la page de connexion. Oui, ne t'en fais pas pour le moment. Enregistrez dans le navigateur. Vous voyez maintenant que nous avons été redirigés vers la page Netflix. Très bien, laissez-moi vous le montrer rapidement pour que vous puissiez bien le comprendre. Retournez à la console. Je vais supprimer tous ces utilisateurs, supprimer des comptes. Et ici, nous devons également supprimer la lecture du compte pour l'actualiser. Et tu vois qu' il n'y a rien ici. Pour l'instant. Retournez à l'application. Rafraîchir. Nous devons maintenant accéder à la page d'inscription. Maintenant, jetez un œil. Lorsque je me suis inscrit avec un nouvel e-mail, cela me redirige vers la page Netflix. Je vais le faire ici. John@gmail.com. Lancez-vous. Je vais faire 123ab C puis m'inscrire. Nous sommes maintenant redirigés vers la page Netflix. Et c' est exactement l'intention. Oui. Vous voyez bien, avons donc terminé avec la page d'inscription. Dans la prochaine conférence, nous allons effectuer une authentification à l' aide de la page de connexion. 81. 79 Authentification de connexion: Bon retour à tous. Ainsi, lors de la conférence précédente, nous avons mis en place la page d'inscription. Les utilisateurs peuvent donc créer un compte et ils seront redirigés vers la page Netflix, qui est la norme. Nous allons maintenant procéder à l'authentification de connexion. Supposons donc que vous utilisiez notre service d'inscription à l'application, puis que vous vous déconnectiez. Ainsi, lorsque vous vous déconnectez, vous n' avez pas à vous inscrire à partir de zéro. Tout ce que vous avez à faire est de vous connecter à l'application à l' aide de vos informations d'identification, que vous avez réellement créées précédemment. Maintenant, avant de passer à la page de connexion, nous allons effectuer quelques réglages qui ne prendront pas de temps. Revenez au navigateur , puis revenez à la console Firebase. Nous voulons supprimer l'utilisateur de cette manière. Supprimons ce compte. Donc, tous les comptes que vous avez ici, supprimez-les tous. Nous allons le créer à partir de zéro. Revenez au code, allez sur la page d'inscription, puis nous placerons un commentaire à ce sujet. Nous ne voulons donc pas qu'il soit redirigé vers la page Netflix lorsqu'ils utilisent notre inscription pour le moment. OK, juste pour le moment. Il s'agit simplement, par exemple, de saké. Un commentaire sur l'utilisation de la navigation. Vous pouvez également appuyer sur un commentaire ici si vous le souhaitez. Bien. Je n'ai pas fait ça. Passons à la page de connexion, n'est-ce pas ? Nous sommes sur la page de connexion. Nous allons importer . Copions les données de la page d'inscription. Je ne veux pas que nous perdions du temps ici. Surlignez et copiez. Page de connexion et collez. Maintenant, nous n'avons pas besoin d'un utilisateur désigné avec e-mail et mot de passe. Auparavant, nous avons créé les utilisateurs et nous n'en avons plus besoin ici. Donc, ce dont nous avons besoin pour le moment, c'est de nous connecter avec un e-mail et un mot de passe, de brumiser et tout ça plus une virgule ici. Et il sera importé depuis l'authentification Firebase. Et bien sûr, nous avons créé ce module précédemment. Cela fait, nous devons également importer la copie des navigations de l'utilisateur à partir d' ici et la coller ici du commentaire. Très bien, nous devons donc également importer le jus qui se trouve en haut. Donc, pour le faire de manière plus professionnelle, ce que je vais faire maintenant, c'est séparer les entrées, surligner, les couper , les coller ici. Il s'agit donc de l'entrée que nous avons faite aux bibliothèques externes et de l'entrée que nous avons faite à nos propres fichiers que nous avons créés. Cela explique au moins comment créer une application comme un pro. Et s'il vous plaît, prenez note que cela vous aidera certainement à l'avenir lorsque vous serez embauché. Maintenant, ce qu'il faut faire ensuite est de créer les variables d'état nécessaires à utiliser. Ici, je vais plutôt générer l' utilisation de ces extraits. Ensuite, je vais envoyer des e-mails. Ça devrait être sur la carpe. Donc, l'état initial de ceux-ci sera également une chaîne vide ici. Nous allons faire l'extrait d'utilisation. Et ce sera un mot de passe, désolé, comme ce mot de passe défini, ce sera sur CUP. De plus, l'état initial sera une chaîne vide, qui est le champ de connexion, est-ce pas ? Laisse-moi te montrer. Viens ici, barre oblique de connexion. Très bien, voici le champ e-mail et voici le champ du mot de passe. L'état initial sera donc un champ vide comme celui-ci jusqu'à ce que l'utilisateur commence à imputer ses propres informations d'identification. Revenez au code et commençons. Hein ? Le champ de saisie ne permettrait-il de formater le code. Maintenant, d'accord, maintenant le code apparaît bien. Nous allons implémenter l'onchange. Ainsi, lorsque l'utilisateur commence à taper dans le champ de saisie, nous allons avoir accès aux événements. Ça va ? Et puis d'abord, appelons la fonction de configuration pour mettre à jour l'e-mail. Définissez un e-mail. Ensuite, nous allons le définir sur e point, quelle que soit la valeur saisie par l'utilisateur, c' est-à-dire e point, cible cette valeur. Et je t'ai appris toutes ces choses. Donc, lorsque nous nous entraînions les bases, nous réagissons en tête-à-tête. Donc, ici, je vais faire, la valeur sera e-mail, copier, ne pas aimer cette copie, surligner et copier. Accédez au champ du mot de passe et collez-le ici. Formate le code avec prettier. Il vous suffit de maintenir les touches Shift et Option de votre clavier enfoncées , puis d'appuyer sur F pour formater avec Prettier. Ou vous pouvez aussi faire quelque chose comme ce clic droit sur Formater un document avec un code plus joli pour la devise. D'accord, nous allons donc le changer pour définir le mot de passe. Ici inchangé. La valeur sera la valeur du mot de passe, c'est aussi simple que cela. Très bien, une fois cela fait, effectuons rapidement l'authentification. Faites défiler l'écran vers le haut. Très bien, hé, nous allons faire const, gérer, verrouiller, équa, le régler sur notre fonction. Nous allons avoir un lavabo et il est certain que cela va tenir une promesse. Nous devons donc attendre. Le problème est ici comme ça. Et je vais me connecter avec e-mail et mot de passe. Dans cette fonction, nous allons transmettre à Firebase le karma, l' e-mail et le mot de passe. Et tout cela serait emballé dans un bloc Try Catch. Alors surlignez-le et coupez-le. Ensuite, nous allons générer un bloc try catch. Donc, juste dans le bloc d'essai, nous allons coller et juste ici, dans le catch. Donc, en cas d'erreur ou de coût, nous devons détecter l'erreur , puis l'enregistrer dans la console. Le plus simple est qu'une fois cela fait , nous devons enfin effectuer l'authentification pour vérifier l'utilisateur actuel. Ensuite, si les informations d'identification sont correctes, nous devons les rediriger vers la page Netflix. Et bien sûr, nous l'avons fait lors de la conférence précédente. Accédez à la page d'inscription. Viens ici. Copiez ce gars, surlignez et copiez. En dehors de cette fonction. Veuillez ne pas le faire dans cette fonction. Sortez de la fonction et collez. Nous devons maintenant supprimer le commentaire, le format, le code, Shift Option F pour formater le code. Et maintenant, nous devons appeler cette fonction directement dans la protéine. Lorsque vous cliquez sur le bouton de connexion, nous devons appeler la fonction de connexion handle save. Il indique que Navigate n'est pas défini. Ça va ? C'est simplement parce que nous ne l'avons pas initialisé. Rappelez-vous que nous l'avons importé ici en haut. Maintenant, nous devons l'initialiser. Et bien sûr, nous l'avons fait lors de la conférence précédente. Et je dois copier. Collez, surlignez, supprimez le commentaire , enregistrez l'application, et maintenant tout fonctionne parfaitement. Le code est exempt d'erreur. Mais vous avez encore dit une chose, c'est une contribution ici. Il s'agit d'une importation inutile. Vous n'aurez peut-être pas cette importation à la fin. Tellement ignoré. Enregistrez, revenez au navigateur. Et maintenant, connectons-nous, car vous devez d'abord créer un compte avant de vous connecter. Oui. Donc, ici, je vais m'inscrire à Slash. C'est vrai. Pour accéder à la page d'inscription. Je vais faire angela@gmail.com. Lancez-vous. Ensuite, le champ du mot de passe apparaît et nous allons faire 123ab c. Maintenant, inscrivez-vous. Lorsque vous cliquez sur le bouton S'inscrire, pour l'instant, vous ne serez pas redirigé vers la page Netflix simplement parce que nous avons supprimé cette fonctionnalité. Maintenant, voyons si l' inscription a été actualisée avec succès. Nous avons maintenant créé le compte pour Angela, mais nous n'avons pas créé ce compte. Nous devons revenir à la page de connexion (page de connexion avec barre oblique). Pouvez-vous voir que lorsque vous revenez à la page de connexion, cela vous redirigera vers la page Netflix. Tu sais pourquoi ? Permettez-moi de vous expliquer rapidement ce qui se passe sous le capot. Revenez au code VS. Donc, quand il arrive sur la page de connexion, il va dire : « Hé, j'ai trouvé un utilisateur actuellement enregistré ». Alors, redirigez rapidement l'utilisateur enregistré vers la page Netflix. Oui, donc c'est exactement ce que fait ce gars ici. Et c'est la raison pour laquelle vous voyez qu'il ouvre la page de connexion, puis redirige rapidement. Accédez à la page Netflix. Permettez-moi de vous montrer rapidement comment obtenir les résultats que nous attendons. Revenez au navigateur , puis ouvrez la console. Alors, d'accord, lorsque la console clique sur l'icône de ce dossier, accédez à l'application, n'est-ce pas ? Nous devons donc aller dans Stockage, cliquer sur Stockage, puis ouvrir la base de données d'index. Hé, c'est ça ? Nous devons donc cliquer dessus, supprimer, sélectionner à nouveau et supprimer. Alors maintenant, lorsque nous essayons à nouveau d'accéder à la page de connexion, pouvez-vous voir maintenant ? Essayons maintenant de voir si nous pouvons utiliser ce compte pour nous connecter à la page Netflix. N'oubliez pas qu'Angela est là. Vous pouvez créer le compte de votre choix. Alors essuyez-le, collez Angela. Et ici, le mot de passe est 123ab C. Cliquez sur Connexion pour voir ce qui se passe. Pouvez-vous voir maintenant que tout fonctionne parfaitement comme prévu. N'est-ce pas magnifique ? C'est extrêmement beau et je l'aime bien. Dans la prochaine conférence, nous allons essayer autant que possible d' implémenter la fonctionnalité de déconnexion. Revenez au code, identifiant d' inscription point js. Ensuite, nous devons supprimer les commentaires pour que tout commence à fonctionner parfaitement comme prévu. Est-ce que tout est cool ? Sûr ? Page de connexion. Kay. Bien. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Nous nous concentrerons sur les soins holistiques. 82. 80 OnScrollEvent: Bon retour à tous. Très bien, donc dans la conférence précédente, nous avons implémenté l' authentification et je pense qu'elle fonctionne parfaitement bien de votre côté. Oui, donc dans cette conférence, nous allons implémenter la navigation par le haut. Ainsi, lorsqu'un utilisateur clique sur le lien, redirigé vers le composant correspondant. Très bien, nous n'avons donc pas à faire manuellement quelque chose comme ne pas aimer, inscrivez-vous. Vous voyez bien que nous n' aurons plus à faire quelque chose comme ça ? Oui, implémentons rapidement la commande B de Top Now VS Code pour ouvrir l'Explorateur et pouvoir y écrire Nous devons ouvrir le flux point js suivant, fermer à nouveau l'Explorateur. Ensuite, je vais effacer ce Netflix ici et donner cette division un nom de classe, n'est-ce pas ? Quand le héros, nous allons afficher l'image du héros, IMG SRC égal, copier et coller le lien du héros , car les droits d'image se trouvaient dans les matériaux. Ne t'inquiète pas, je vais te montrer en GeV ici, n'est-ce pas ? Oui, c'est juste dans les documents de Netflix. Ensuite, vous pouvez ouvrir l'assistant de code et le copier à partir d'ici. Nous allons le faire ici, l'image est bonne, ce n'est pas un problème. Donc, après avoir fait cela, voici le résultat. Bien. Maintenant, la prochaine étape consiste à implémenter les événements on scroll. Permettez-moi de vous montrer, par exemple je vais surligner cette image, dupliquer autant que possible, enregistrer le navigateur. Alors voyez-vous maintenant que je peux faire défiler la page de haut en bas. Mais en fait, nous voulons obtenir le résultat sur, lors du défilement, par exemple, supposons que l' application soit sur l'axe Y. Ainsi, sur l'axe Y, l' événement de défilement est égal à zéro, mais lorsque vous faites défiler l'écran vers le haut, les événements de défilement automatique seront supérieurs à zéro. Nous allons donc le conditionner de telle sorte que s' ils possèdent des événements de défilement, le décalage de page soit nul. Nous voulons que l' état initial soit faux. Sinon, nous voulons que l' état initial soit vrai. Ainsi, lorsque l'application fonctionne comme ça sur la page Y , le décalage sera égal à zéro dans le sens du ton. Ensuite, s'il est égal à zéro, nous allons le mettre à faux. Mais lorsque vous passez à la page supérieure, décalage Y sera supérieur à zéro. Et s'il est supérieur à zéro, nous allons définir l'état initial sur true. Mettons-le en œuvre pour que vous puissiez le comprendre suffisamment bien. Retournez ici. Nous allons le faire correctement ? Nous sommes dans le composant. Maintenant, nous devons implémenter l'événement on scroll et je vais créer des points de fenêtre sur le défilement. Cela fait, nous devons également déclarer les variables d'état nécessaires à utiliser. Alors, rapidement, générons les extraits de code usted. Alors je vais le faire, c'est foutu. Il va être réglé, vissé sur la lettre majuscule I. Donc l'état initial va être faux car il sera égal à zéro. Ainsi, lorsque l'utilisateur ouvre l'application, l'état initial du défilement devient faux car nous ne l'avons pas vissé en haut ou en bas. Mais lorsque nous commencerons à faire défiler la page, elle sera supérieure à zéro. Et c'est ce que nous allons faire de cela une réalité. Alors, ce que nous allons faire maintenant, d'accord, très bien. Ici, nous devons mettre à jour l'état initial défini est foule. Nous allons régler les décalages vissés aux points Y de la fenêtre. Donc, si les décalages p-y des points de la fenêtre sont égaux à zéro, l'état initial sera faux. Et les flèches, l' état initial va être vrai. Et ce qui se passe maintenant, nous allons y revenir lorsque les points défileront. Maintenant, ce que je vais faire maintenant, c'est faire défiler le journal de la console pour que je puisse vous montrer de quoi il s'agit. Console.log est grossier. Sauf cette utilisation, elle n' est pas définie. Nous devons l'importer par le haut. Utilisez à nouveau la commande I pour ouvrir la console, tout fonctionne parfaitement et sur le navigateur , d' accord, étrange commande I. Ici, sur la console. Et assurez-vous que vous le pouvez. Vous voyez maintenant que l'application sur le décalage dans le sens du pas est égale à zéro. Donc, sur le navigateur, vous allez voir false. Ainsi, lorsque je fais défiler la page vers le haut, l'application sur les décalages de hauteur sera supérieure à zéro. Par conséquent, l'état initial des décalages de hauteur sera défini sur true. Voyons voir. Pouvez-vous voir que lorsque vous faites défiler la page vers le haut, cela revient à vrai. En haut, encore une fois, l' application est vraie, mais beaucoup marquent trois points lorsque l'application sur le décalage dans le sens du ton devient nulle, elle renverra faux. Vous voyez maintenant que c'est faux ? Faites défiler à nouveau la page vers le bas, cela devient vrai. Au sommet, ça atteint zéro et ça devient faux. Donc, fondamentalement, ce que nous faisons est vrai, faux, vrai. Hein ? Magnifique. C'est donc exactement l' intention de cette conférence. Dans la prochaine conférence, nous allons implémenter la navigation par le haut. 83. 81 Composante TopNav: Très bien, donc dans la conférence précédente, nous avons implémenté les événements On Scroll. Nous avons pu mettre à jour l'état initial de faux à vrai, de faux à vrai. Et je sais que certains d'entre vous sont curieux. Vous voulez savoir pourquoi nous l'avons fait. Ne t'inquiète pas. À la fin de cette conférence, vous le comprendrez certainement assez bien. L'accès direct à VS Code et l' implémentation moins rapide des droits Top Nav se trouvaient dans les composants. Créez un nouveau fichier appelé top mouth. Les points sont un FCE qui génère le composant fonctionnel. Importons donc rapidement les éléments nécessaires à utiliser. Tout d'abord, nous allons utiliser l'icône React. Je vais donc installer les icônes React Dash par npm. Pendant que l'installation est en cours. Nous allons importer à partir d'ici, importer des plans, nous déconnecter à partir des icônes React Dash, des barres obliques. Nous en avons la surface grâce à l'IA. Et au fait, l'icône React a été installée avec succès. Si vous ne l'avez pas installé de votre côté, vous suffit de le faire maintenant. Ensuite, nous devons importer le stout à partir du composant stout. En tant que lien d'entrée, diverses lettres majuscules L du réacteur Dash Route font l'objet. OK. Maintenant, nous pouvons y aller. Nous allons enregistrer les droits de navigation dans un tableau. Je vais donc faire const, nav link, equal, le définir sur un tableau vide. Et juste pendant le montage, nous allons prendre un objet. Très bien, nous sommes dans l'objet. Nous allons lui donner un nom pour que la page d'accueil soit plus calme. Nous allons le lier à une barre oblique comme celle-ci. Laisse-moi te montrer. N'oubliez pas que nous avons implémenté les itinéraires dans la conférence précédente. Tout cet itinéraire se trouve ici. Nous allons donc le faire pour la page d'accueil, inscription au lecteur TV et tout le reste, non ? J'ai trop parlé. Je suis désolée pour ça. Les surlignements le dupliquent trois fois et veillez à placer une virgule ici pour le séparer. Cela fait, changeons-les en émissions de télévision et nous devons suivre la voie. Téléviseur Dash. Il sera ma liste. Nous devons suivre l'itinéraire, ma liste, nous avons créé tous ces itinéraires. Enfin, nous allons faire des films slash. C'est aussi simple que cela. Cela fait, nous allons cartographier ce tableau et tous ces onglets afficher tous ces onglets en haut à droite de l'écran. Donc, pour ce faire, nous allons travailler sur l'UE. Nous allons maintenant avoir suffisamment de porte-conteneurs. Bien. Ici. Je vais faire Const, Love Container , un Stout Dot Div. Ensuite, ils peuvent les cocher arrière pour que nous puissions le styliser à l'intérieur. Ce type. Ici. C'est ça. OK, très bien. Nous allons maintenant avoir un div avec le nom de classe du côté gauche. Parce que nous allons avoir le côté gauche du Top Nav et le côté droit. Donc en dehors de cette division, nous allons avoir une autre division. Donnez-lui un nom de classe du côté droit. OK, travaillons sur le côté gauche. Hein ? Sur le côté gauche, nous allons avoir le logo. Nous allons donc avoir un div avec le nom de classe logo. Ensuite, le logo, il faut l'afficher avec le tag IMG, SRC égal. Je vais coller le lien du logo ici, ainsi que l'étiquette à fermeture automatique. Et ce lien, vous pouvez le copier-coller depuis le répertoire des matériaux. C'est ici ? Oui, le logo Odds Equal et le plus simple. Qu'est-ce qui fonctionne encore une fois ? OK, maintenant nous devons cartographier ces objets, non ? Il s'agit donc du div avec le nom de classe logo, juste à côté du div avec le nom de classe Logo. Nous allons avoir une liste ordonnée. Nous allons donc avoir l'UL comme nom de classe des liens, juste à l'intérieur. Nous allons cartographier tout cela ici. Je vais créer un lien de navigation. D'accord, je pense que nous devrions en faire un mot au pluriel parce que c'est bien. Vous nommez votre tableau avec une route au pluriel, car il s' agit d'un ensemble de détails ayant un type de données similaire. Nous avons donc des données, et pas seulement des données. Je comprends que nous ne sommes pas en cours d'anglais ici, mais c'est bien d'être grammaticalement excentré lorsque vous faites des choses. Très bien, des liens de navigation , une carte à points, une autre parenthèse , puis nous allons prendre les crochets, juste entre crochets, nous allons perturber votre nom. Virgule sur ln, pour afficher un Jiffy. Faites défiler la page vers le haut, ce nom se trouve ici. Et un lien. Ensuite, après avoir fait cela, réglez-le sur la fonction d'erreur, ouvrez et fermez les crochets bouclés et cliquez à droite pour les mettre entre crochets, nous allons renvoyer l'interface utilisateur. Nous allons donc avoir ici un tag LI. Et j'ai mis une clé. La clé va être nommée. Donc, directement dans la balise LI, ou nous allons avoir les liens, n'est-ce pas ? Nous devons donc afficher ici le nom des liens. Lorsque vous enregistrez, laissez-moi vous montrer statistiques du MPM dans le répertoire du client. Et avant de commencer, allez sur Netflix. Fais une bêtise ici. Voyons si nous pouvons afficher le bouton supérieur ici. Et assurez-vous de l' importer en haut de la page. Sauvegardons le projet. Viens ici, cétone, appuie sur la touche Entrée pour que ça déclenche trop notre conversation. Rien ne s'affiche à l'écran. Pourquoi ? Hein ? Voyons ce qui va se passer. Navigateur supérieur. C'est un lien. Nous avons donc déstructuré le nom et le lien. Alors pourquoi ça ne marche pas ? OK, faisons quelque chose d'égal à égal. Nous devons donc le lier pour spécifier le lien comme celui-ci, en toute sécurité sur le navigateur. Rafraîchissons ce qui est à nouveau, voyons ce qui se passe ici. Très bien, alors examinons le problème ici. Il indique qu'une erreur de type, composants de soulignement de style, un trait de soulignement et un trait de soulignement étaient garés pour ce module. Par défaut. Div n'est pas une fonction. Les gars. Jette un coup d'œil. Il s'agit bien d'une erreur typographique. Cela devrait être un div à points, lorsque vous enregistrez et que vous extrayez dans le navigateur, les identifiants, tout fonctionne parfaitement bien. Maintenant, vous pouvez voir les liens. Lorsque vous cliquez sur l'émission TV, vous êtes redirigé vers la page de l'émission TV. Revenez en arrière. Ma liste. Films. Tout fonctionne parfaitement bien sous forme d'aspartate. Nous devons donc maintenant styliser le composant si rapidement. Travaillons du bon côté, déf. Et encore une fois, voici un autre type d'erreur graphique. Je ne sais pas. Alors voilà, tard dans la nuit. Donc, je vous en prie, excusez-moi, juste pour cette conférence. Je vais faire du drapeau D. C'est très bien. Nous commettons tous des erreurs. Et peut-être s'agit-il simplement d'une erreur typographique et non d'une erreur. Exact. Maintenant. Nous allons avoir le droit de vote ? Nous sommes dans cette division avec le nom de classe « embarquement sur le côté droit ». Et puis bien, nous sommes dans ce bateau et nous allons afficher la déconnexion hors ligne. Fermez-le à l'aide de l'étiquette à fermeture automatique. Enregistrez dans le navigateur. Le voici, pouvez-vous voir que voici la déconnexion. Donc, dans la prochaine conférence, nous allons implémenter cette protéine. Mais pour l'instant, nous devons conserver l'interface utilisateur revendiquée en stylisant l'entreprise. OK, dialysons le composant lors de la prochaine conférence. 84. 82 css mondial: D'accord, donc avant de procéder à la stylisation de ce composant, effectuons rapidement les réglages nécessaires, n'est-ce pas ? Nous sommes dans le point d'index CSS. Vous pouvez donc simplement utiliser Command V ou Control P pour faire apparaître le champ de recherche en haut, puis rechercher le point d' index CSS, comme ceci. Et ici, nous allons appliquer du CSS global. Tout d'abord, nous allons modifier l'arrière-plan. Je vais faire ici la couleur de fond. Faisons en sorte qu'il soit noir, juste comme ça. Après avoir fait cela ici, nous allons faire une marge zéro, une erreur de remplissage. La taille de la boîte sera Border-Box. Nous allons donc faire du débordement. Débordement sur l'axe X. Nous allons le cacher. Et c'est fait, laisse-moi voir. Bien. Maintenant, l'arrière-plan est noir et vous ne pouvez pas faire défiler l'écran vers la droite. Vous ne le remarquerez peut-être pas, mais je peux vous assurer qu'ils débordent de fonds cachés et fonctionnent parfaitement bien. Ce sont les paramètres nécessaires que nous devons définir à l'échelle mondiale. 85. 83 Composante TopNav: Bon retour à tous. Nous allons donc rapidement styliser les composants en haut à gauche. Revenez au code VS. Maintenant, avant de continuer, nous devons revenir à la page Netflix. Et ici, nous avons implémenté le point de fenêtre sur l'écouteur Scroll. Oui, donc ce que nous allons faire maintenant, c'est le transmettre sous forme de sondes dans le navigateur supérieur. C'est donc assez facile à faire. Je vais donc m' occuper de la croissance. Equa, c'est foutu. Maintenant, il est passé sous forme d' accessoires vers le haut. Maintenant, la prochaine étape consiste à le recevoir, n'est-ce pas ? Nous sommes dans la meilleure composante de navigation. Et pour ce faire, il suffit de le déstructurer ici. Il a défilé. C'est le plus simple. Oui. Donc, après l'avoir fait maintenant, je serais en mesure d'obtenir les informations d'ici, n'est-ce pas ? Nous sommes au top maintenant. Nous allons savoir si l'état est vrai, faux, vrai ou faux. Bien, nichez ici. Je vais faire de la navigation, lui donner un autre nom de classe, et ce ne sera pas le cas dynamiquement. Nous allons donc avoir le cran. Et tu sais que ça vient d'ici, n'est-ce pas ? Bien. Donc, si cette citation est vraie, nous aurons dynamiquement une classe appelée screwed. Maintenant, nous n'aurons plus de vis, juste comme ça. En fait, l'idée est de pouvoir styliser le haut. Maintenant, ne t'inquiète pas, tu comprendras assez bien quand j'en aurai fini avec ça. Oui. Ensuite, je vais tout copier comme ça. Pouvez-vous voir les lignes 20 à 43 ? Déplacez-le dans la navigation. Ce type est là. Tu peux voir ? Très bien, alors maintenant, sans plus tarder, commençons à styliser l'application. Maintenant. Nous allons styliser, pas des vis, des points, pas des parchemins. Nous allons l'avoir Display Flex. Points, parchemin. Encore une fois. Nous allons avoir un écran flexible, puis la couleur d'arrière-plan sera le noir. C'est pourquoi nous avons écouté l'événement Scroll. Quand tu dis ventricule au navigateur et boum. Maintenant, vous ne le voyez peut-être pas clairement parce que nous devons styliser la navigation, qui est ce type ici. Il suffit de copier la navigation. Nous allons l'avoir en position. Faisons en sorte que ce soit collant. À partir du haut, nous allons être nuls. Cela va donc le pousser vers le haut. Et la hauteur de ces GPS supérieurs sera de six RAM. La largeur est de 100 %. Justifiez le contenu. L'espace entre les positions va être corrigé parce que nous voulions corriger le z-index supérieur. Faisons-en deux, en ajoutant 0,4. Alignons les éléments au centre. Ainsi, lorsque vous enregistrez et consultez le navigateur, maintenant, lorsque vous vous trompez, vous vous rendrez compte que la couleur de fond de la navigation supérieure deviendra noire. Je suis sûr que tu peux. Vous voyez, c'est simplement parce que lorsque vous faites défiler l' application sur l'axe Y, elle va définir cela sur vrai. Ensuite, lorsque vous faites défiler la page sur true, nous allons appeler cette classe, qui est la vis, puis appliquer à l'arrière-plan une couleur noire. Donc, aussi simple que cela, nous allons maintenant lui donner une transaction afin que vous ayez une jolie animation lorsque vous faites défiler le point zéro. C'est-à-dire que celle de Satan est dans quelques heures. OK, stylisons rapidement le logo afin que vous ayez une idée claire de ce que nous avons fait jusqu'à présent, je pense. Oui. Points. Faisons le côté gauche. Je conseille toujours de copier exactement ce que vous avez ici afin de ne pas avoir de problèmes inutiles. Côté gauche. Nous allons le faire afficher, fléchir , puis aligner les éléments au centre. Donnons-lui un espace intermédiaire. Je vais faire Gap to Ram. Cela fait, stylisons rapidement le logo. Le logo, puis faisons-le s'afficher à nouveau. Le flux fractionné. Justifiez le contenu au centre, alignez les éléments au centre, sans obligation. Maintenant, gérons l' image avec précision. Img la largeur. Faisons en sorte que ce soit dix RAM à la hauteur deux, rem, sauvegardez l'application. Et c'est ce que nous avons. Tout est bien aligné. Maintenant, vous avez le logo ici, et maintenant vous avez également le bouton de déconnexion ici. Un côté commun ici. Et nous allons faire les liens codés. Nous voulons styliser ces liens utilisés ici pour les apparaitre en ce moment. Nous allons donc leur demander de l'afficher , de l'enregistrer et de le consulter. Vous voyez maintenant que nous avons une émission de télévision personnelle et que les autres sont aussi belles. Très bien, quand je vais le faire ici, LI, LI, nous allons cibler une cible, la résoudre, lui donner une couleur blanche. Enregistrez dans le navigateur. Maintenant, tu l'as. OK, c'est bon, tout est cool. Mais une autre chose que je veux que vous remarquiez, c'est que vous ne le voyez peut-être pas clairement, mais cela s'affiche à l'écran. Maintenant, ce que je veux faire, parce que je veux que vous compreniez chaque élément de ce code, surlignez toutes ces images. Vous pouvez y placer un commentaire. Ne fais pas ça à la fin. Regardez-moi parce que c' est pour des articles pédagogiques. Vous ne le verrez peut-être pas non plus. Je vais aller au point d'index css et ne rien faire, surligner et placer un commentaire sur la couleur de fond. Revenez. Bien. Ce sont donc les points que nous ne voulons pas. Tout semble, laisse-moi , laisse-moi le faire si bien. Voici donc à nouveau un commentaire à ce sujet. OK, très bien. Tu peux voir ce point ici ? Point, point, points. Nous ne voulons pas qu'il supprime ces points. Ce que je vais faire, c'est revenir au lien , puis je vais faire la liste, le style, type, en toute sécurité dans le navigateur. Maintenant, le point a disparu. Ne voyez-vous plus aucune esquive profane ? Tu ne peux pas en voir. Nous sommes là. Maintenant, supprimons le soulignement. Je n'aime pas le sous-jacent. Hé, je vais juste faire de la décoration. Aucun, enregistrez le projet. Et maintenant, nous avons un lien approprié ici. C'est sympa, j'adore ça. En observant attentivement, vous vous rendrez compte que l'ensemble de ces liens sont tous serrés les uns contre les autres. Laissez-nous un espace entre les deux. Donc pour le faire, d' accord, encore une fois dans le lien, je vais faire Gap en tant que Mickey Three Rem, économisant sur le navigateur. Oups, d'accord, c'est bon. Cool. Détruisons certaines choses que nous venons de faire pour enseigner les poivrons. Enregistrez ici. Et maintenant, nous avons l' application comme celle-ci. Retournez à Top Glove, changez la couleur en blanc et bien. Voyez-vous que tout fonctionne parfaitement ? OK, il est maintenant temps de styliser le côté droit, où se trouve le bouton de déconnexion. OK. Tu vois qu'il est temps de styliser ce gars. Maintenant, ce que je vais faire, c'est fermer le côté gauche. Soulignez ce gars ici, assurez-vous qu'il se ferme comme ça. Avec ceux-ci, nous avons fermé le côté gauche et commençons maintenant par le côté droit. Points. Faites défiler vers le haut. Côté droit. Nous allons l'avoir Display Flex. Alignez les éléments au centre. L'écart devrait être d'une pièce. Ciblons le bouton. Je vais vous montrer ce bouton ici. D'accord ? Parce que donnez le rouge à l' arrière-plan , le rouge ira bien. Puis la frontière. Faisons le savoir. Pointeur causal. Regarde ce que nous avons. Maintenant. Tu vois ? Bien. Je pense que nous devons augmenter la taille. Donc, avant de procéder à l'augmentation de la taille, je vais faire ceci et me concentrer. Le plan ne ciblera pas le SVG lui-même, qui est ce gars-là. Laisse-moi te montrer. Ces gars. Très bien, les gars, il est tard dans la nuit, alors d'accord, allons-y. Je vais faire comme VG. La couleur du SVG est le rouge. La taille de police, à laquelle l'actrice pense être la taille du SVG, faisons en sorte qu'il pleuve. C'est peut-être trop grand. Alors sortons-le, enregistrons le navigateur et vous verrez qu'il est extrêmement volumineux. Et changeons cela en blanc et voyons ce qui se passe. Si l'application. Et voilà, vous rechargez, vous voyez que tout va bien. Mais il y a une chose que nous ne voulons pas, c'est ce genre de choses ici. Nous voulons que ce soit un peu circulaire ici. Ce que je vais faire, border radius, c'est faire en sorte que ce soit 50 %. Donc, lorsque vous utilisez ces applications de sécurité sur le navigateur, elles ressemblent maintenant à ceci. Pouvez-vous voir que tout fonctionne parfaitement comme prévu. Avant de terminer cette conférence, je tiens à tout expliquer assez bien. Encore une fois. Retournez sur Netflix. Nous avons donc écouté les propres événements du parchemin. Je n'ai pas écouté les événements à l'écran. Nous avons créé une variable d'état. Et nous avons dit que si le décalage de window.py est égal à zéro, cela signifie que si l'utilisateur n'a pas fait d'erreur, l'application sera comme ça. Et le fond de navigation supérieur n'aura aucune couleur. Donc, si nous savons que les décalages dans le sens du pas sont égaux à zéro, nous définirons l'état initial sur faux, donc nous allons conserver l'état et les L. Nous définissons l'état initial sur true. Par exemple, ici, sur l'application, nous n'avons pas vissé le haut. Le décalage de Pedra est maintenant égal à zéro. Par conséquent, elle renvoie la valeur false. Donc, lorsque je fais défiler la page vers le haut, cela redeviendra vrai. L'idée est d'attribuer un nom de classe au Top Nav de manière dynamique en fonction de l'état. Nous n'avons pas eu à appliquer de couleur de fond au nom de la classe. Nous avons donc passé les vis comme accessoires. Dans le panneau de navigation supérieur. Nous l'avons reçu ici par cette structure. Permettez-moi de vous le montrer ici, après l'avoir fait. Nous avons donc ici un nom de classe, juste ici nous avons la navigation. Et c'est ce que nous avons fait. Si une vis est égale à true, nous aurons un ClassName appelé screwed. Oui, des flèches. Si c'est faux, nous aurons un code ClassName qui ne défilera pas. Donc, si le défilement est défini sur true, cela permettra de styliser le nom de ce cluster et de définir l'arrière-plan sur noir. Laisse-moi te montrer. C'est exactement ce qui se passe ici. Maintenant, le fond est noir. Ainsi, lorsque les utilisateurs agrandiront l' application vers le haut, nous allons maintenant appliquer le fond noir en haut. Comme ça. Compris, magnifique. C'est donc tout pour le moment. Et dans la prochaine conférence, nous commencerons à implémenter la section héros. 86. 84 déconnexion: Très bien, donc dans cette conférence, nous allons procéder à la mise en œuvre de la fonctionnalité de déconnexion. Ainsi, lorsque vous observez le coin supérieur droit de l'écran, vous verrez le bouton de déconnexion. Ainsi, lorsque l'utilisateur clique sur ce bouton il sera en mesure de se déconnecter de l'application. Mettons-le rapidement en œuvre. Revenez au code VS. Nous allons importer ou ne pas modifier les états, déconnecter de Firebase. Je pense donc que nous l'avons sur la page de connexion. Ouvrez rapidement la page de connexion, puis d'accord, importons ce gars. Surlignez et copiez. Accédez au menu de navigation supérieur. Collez-le ici. Ce que nous voulons, c'est un changement automatique et aussi , la déconnexion de Karma. Revenez à la page de connexion. Nous allons copier la Firebase que nous avons créée. Collons-le ici. Enfin, nous allons importer et utiliser Navigate. C'est aussi simple que cela. Donc, en fait, ce que nous allons faire ici est assez simple. Encore une fois, retournez à la page de connexion, faites défiler l'écran vers le bas. Tout d'abord, je vais copier ce gars ici. Ensuite, collez-le à nouveau ici sur la page de connexion. Copiez ce gars et collez-le ici. Donc, s'il n'y a pas d'utilisateur actuel, comme celui-ci, s'il n'y a pas d'utilisateur actuel, nous devons accéder à la page de connexion. Lorsque vous cliquez sur le bouton de déconnexion, vous allez être redirigé vers la page de connexion. Enregistrer. Faites défiler la page vers le bas et mettons-la en œuvre ici. Donc, OnClick, nous allons appeler la déconnexion ici en prenant Firebase. Exactement comme celles-ci. Enregistrez le projet dans le navigateur, n'est-ce pas ? Tu peux voir ça ? Maintenant, nous sommes bloqués. Donc, quand je clique sur la connexion, voyons ce qui se passe. Très bien, maintenant, lorsque je cliquerai sur le bouton de déconnexion, nous serons déconnectés et l'application nous redirigera vers la page de connexion. Essayons-le. Tu peux voir ça ? Nous sommes maintenant sur la page de connexion. Tout fonctionne parfaitement comme prévu également si je souhaite me connecter à l'application. Je vais donc utiliser mes comptes. Angela gmail.com 123ab c, connectez-vous et boum. Maintenant, nous y sommes. Nous avons réussi à créer des Asiatiques authentiques et tout fonctionne parfaitement comme prévu. Donc, dans la prochaine conférence, nous continuerons avec la page des héros. Rendez-vous lors de la prochaine conférence. 87. 85 Composante héros: Bon retour à tous. Dans cette conférence, nous allons concevoir le composant héros ici. Ainsi, à la fin de cette conférence, nous aurons une très belle apparence en matière de design. Procède au code VS. Et continuons rapidement à ouvrir Netflix Dot JS. Donc, ici, je vais supprimer certaines de ces images, car en fait, nous supprimer certaines de ces images l'avons fait pour permettre à leur site Web de défiler. Tu peux voir ça ? C'est exactement la raison pour laquelle nous avons diffusé ces images plusieurs fois. Maintenant, effacez-le sur le navigateur. Hé, est-ce que vous pouvez le voir pour le moment, se peut que nous ne puissions pas faire défiler à nouveau la page. Ne vous inquiétez pas, aucun problème. Donc, la première chose que je vais faire ici est d'importer à partir de composants standard. Juste en dessous. Je vais faire Const Hero Container Equa Styled Dot D, puis l'interpolation des chaînes, ouvrir l'écorce 80 000. OK, maintenant c'est terminé. Ce que je vais faire, c'est surligner et copier le conteneur des héros. Allez en haut. Nous voulons intégrer l' ensemble de la demande dans le conteneur Hero. Sélectionnez la commande X pour couper, déplacez-la ici, mélangez pour formater le code, et tout semble propre. Continuons. Nous avons maintenant un div avec le nom de classe hero. Dans la division, nous avons rendu le Top Nav, puis fait passer aussi rudimentaire que des accessoires dans le Top Nav. Et ici, nous avons l'image du héros. Maintenant, ce que je vais faire juste après la balise de fermeture de l'IMG, nous allons avoir un autre div, lui donner le nom de classe du conteneur. Le conteneur div. Nous allons avoir un autre div, lui donner le nom de classe Dido et le mot juste dans le titre. Nous allons avoir un tag Hadrien, et je vais jouer Superman. Ceux-ci serviront donc de titre. Nous allons donc avoir une balise p qui servira de description. Ce que je vais faire maintenant, c'est copier un test fictif aléatoire sur Internet et le coller entre les deux. Maintenant. Je vais juste coller comme ça. Oui, donc si vous avez une description correcte de Superman, vous pouvez aussi l' écrire ici, mais pour moi, je ne veux pas perdre de temps, donc oui. Donc, juste après le div de clôture du titre du nom de classe, le voici. Nous allons avoir une autre division. Et ce div va nous enregistrer le conteneur de boutons div, div, le nom de classe des tableaux. Nous allons donc avoir deux boutons différents, à droite, dans la section des héros. L'un des boutons en bas sera le bouton Play et l'autre sera le bouton Informations , à savoir le bouton Plus. Voilà, je vais le faire. Acheté en plaide, donnez-lui un nom de classe entre les deux, simplement en évidence ce mélange pour le dupliquer comme ça. Et pour ce qui est encore une fois, je vais en faire plus. Le m devrait être sur Cup. Et puis là, je vais en faire plus. Donc, si vous pensez à mon nom de classe, la convention n'est pas assez descriptive. Vous pouvez le rendre descriptif. De ton côté. Vous pouvez l'écrire en entier. Nous pouvons faire le bouton Play, le bouton Plus. Nous pouvons le faire à la fin. Mais pour moi, je vais juste rester simple comme ça. Une autre chose que nous allons faire, défiler l'écran vers le haut, puis d'importer certaines des icônes que nous allons utiliser dans le tableau. Je vais importer la ligne AIR en boucle. Vous allez le suffixer par un autre. En partie. F, une pièce de React Dash, icône slash. Aussi simple que cela, lorsque vous enregistrez un appel dans le navigateur. Ceux-là. Nous allons donc l' avoir ici, le Superman, qui sert de titre au film, la description ici. Et voici le bouton Play dans l'équipe mobile. Maintenant, quand je zoome un peu sur l' écran, vous allez voir que cette image est cassée. Ressemble à ça. Donc, ce que je vais faire maintenant, c'est styliser cette entreprise. Hein ? Nous sommes sur la banquette arrière. Nous allons faire point ici, rangée. Vous allez avoir une position relative. L'idée est de placer l'ensemble des arrêts juste en haut de l'image du héros. Donc, tout est Superman, la description de la pièce et de l'équipe mobile se trouvera juste en face. Très bien, j'espère que nous devrons styliser les images de cambriolage parce que l'image du héros est cassée et je n'aime pas ça. Maintenant, ce que je vais faire, IMG, c'est cibler l' image, lui donner une hauteur. Faisons la haie de hauteur 70 V puis la largeur. Allons-y à 100 %. Je pense que ça ira. Enregistrez un décalage sur le navigateur et je zoome à nouveau, dézoome, zoome avant sur tout fonctionne maintenant, très bien. D'accord, alors Nest Online consiste à placer ces gars au sommet. Comment faisons-nous cela ? Pouvez-vous me dire, ne vous inquiétez pas, je vais vous aider. Conteneur Dot. Je vais tout vous montrer ici. Comme si c'était juste dans le D pour le nom de classe du conteneur. Donc je veux dire, tout ça, le titre, la description du bateau. Mettons-le en position. Devinez quoi ? Il va être absolu pour le placer au-dessus de l'image du héros. Parce qu'ici, nous le mettons sur relatif. Et ici, quand tu fais de l'absolu, ce type va arriver tout droit au sommet. Pas juste en haut, juste devant le corps ? Oui. D'accord. Ne t'inquiète pas, faisons-le pour que tu puisses bien le comprendre. Ce que je vais faire maintenant, c'est faire en sorte que le bas soit un seul rebord. Quand tu économises. Retournez au navigateur. Nous l'avons toujours ici. Allons y jeter un œil. J'ai écrit, c'est bien. Lorsque vous faites des absolus et que vous avez un rem inférieur, ce conteneur doit se trouver au-dessus du héros, mais pour le moment, il semble qu'il ne fonctionne pas. Oh mon Dieu, je me suis rendu compte que c'était faux. J'en suis désolée. C'est l' orthographe correcte du mot conteneur. Je sais que la plupart d'entre vous l'ont peut-être vu pendant la conférence. Assurez-vous de le corriger. Il s'agit d'une erreur typographique. Effacez ce type et collez ici. Nous avons maintenant l' orthographe correcte du conteneur. Enregistrez dans le navigateur. Maintenant, nous avons les poêles ici. D'accord, c'est bon, mais préparons plus de soupe. Viens ici. Très bien, dans le contenant, nous avons le titre. Et bien sûr, je voudrais vérifier à nouveau le nom de la classe parce que je ne veux pas que nous entrions dans un autre labyrinthe. Le titre est ici à copier. Les gars, écoutez, nous devons le faire comme ça pour ne pas aller bien, non ? Portant le titre, nous avons le tag H1. Ici. Je vais laisser sa marge, transformation à cinq rem, en majuscules. Sauvegardons et voyons. Ok, ça a l' air sympa ici, n'est-ce pas ? Donnons-lui une taille de police de 73 pixels. Très bien, donc pour l' arrière-plan de la police, je vais juste copier et coller à partir de l'assistant de code. Tu vas y jeter un œil. Vous allez voir l'histoire du héros. Copiez et collez cette vignette ici. Enregistrer. Et puis voyons le résultat sur le navigateur. Jette un coup d'œil. Vous voyez maintenant que ce Superman a l' air bien. J'adore ça. OK, stylisons rapidement la balise p. Marge inférieure : 50 pixels. La largeur est de 40 pixels. Marge laissée inchangée. La marge restante est de cinq rem. La famille de polices ne pose aucun problème. Donnez-lui une famille de polices composée de Lexend, Deca, coma, sans, serif. Ensuite, il suffit de spécifier que la couleur doit être blanche. Tout apparaîtra bien. Ça a l'air sympa en effet. La marge inférieure doit être de 50 pixels et non de -50 pixels. Vous voyez maintenant qu'il est en haut. Nous avons également les boutons ici, ne vous inquiétez pas, nous allons les placer en haut de la page dès maintenant. Donc, juste à côté du titre, nous avons une autre division. Permettez-moi de vous montrer le div ici avec le nom de classe des planches. Je vais juste copier les boutons point de ce nom de classe. Et puis je vais faire en sorte qu'il affiche Flex. Donnons-lui une marge de cinq rem. Écart dévié vers Frem. D'accord. C'est bon D'accord. Que faire encore une fois ? Devons-nous faire ? Nous devons styliser le bouton et le rendre plus beau. Nous avons également la classe btn. Nous avons des points, plus de classe BTN. Et tout cela, vous savez déjà que c'est un top, le mélange d'orthographes de vos noms de classe est correct. Justifions le contenu. Au centre, les polices du bouton seront rouges. Donnons-lui un rayon de bordure. OK, faisons en sorte que ce soit un wireframe. Cela le rendra en fait un peu sinueux. Sauvegardons et voyons. OK, ça va vraiment bien. Allons plus loin. La taille de la police. Un point pour lui. L'écart est constitué d'un rembourrage de jante, d'un rembourrage de 0,9 point à gauche et d'un rembourrage REM à droite. Point de chaussure pour AIM. Oups, les gars, jetez un œil. Je ne sais pas pourquoi cela continue de se produire. D'accord. La bordure a été corrigée. Nous ne voulons pas de frontière, donc je vais la désactiver. Voyons ce que nous avons pour l'instant. Et ça a l'air bien. Effectuez un zoom arrière. J'adore les résultats. Continuons l'affaire. Faisons-en un pointeur. Ce sera donc exactement le même que le plus entre n. Copiez le style de a ici et collez-le ici lorsque vous enregistrez un, retirez-le. Hein ? Maintenant, nous devons changer la couleur de fond du more btn. Et la couleur ici, qui est la couleur de police elle-même, sera le blanc, la couleur de fond. Faisons en sorte qu'il soit noir et que la bordure soit noire. Soin. Donc, ce gars là, le corps va avoir 0,1 RAM en blanc fixe. Allons y jeter un œil. Parfait. Tout est en bon état. Mais une chose que je veux faire maintenant, c'est l'espace vide entre la description en bas correspond parfaitement. Je pense donc que nous devons le réduire un peu. Laissez-moi voir la description, qui est le titre. La description ici, bas de la marge. Faisons-en dix. Tu vois, à quel point ça n'a pas marché comme ça. D'accord, nous trouverons un moyen de le réduire. Donc je vais le faire paraître à -50 gars, il semblerait que le -50 fonctionnera cette fois et ça marche. Tout est cool. Mais une chose que je veux que nous en œuvre est de rendre l'arrière-plan un peu sombre pour que l'image qui est l'image du héros soit, accord, les gars, implémentons-la pour que vous compreniez ce que je vais dire. Viens ici, fais défiler la page vers le haut. Et ici, nous allons faire la couleur de fond. Faisons en sorte qu'il soit noir. Cela fait, d'accord, le héros ne le ferait pas, je vais faire un point, un arrière-plan, un tiret, une image. Ne vous inquiétez pas, nous allons créer cette classe dès maintenant. Copiez, donnez à l'IMG un nom de classe d'image d'arrière-plan, le point le plus simple, puis revenez et moins de Thaïlande, c'est ici ? Voyons ce qui se passe ici. Futa, je vais régler la luminosité. Faisons en sorte que la luminosité soit 40 % en espérant que cela fonctionnera. Cela a parfaitement fonctionné. C'est exactement ce que je veux dire. Parfois, le résultat de votre travail est la meilleure explication. C'était mon intention. Viens ici. Vous n'aurez peut-être même pas à les faire. D'accord ? Nous avons maintenant réussi à obtenir un arrière-plan transparent. C'est classique. C'est tout pour le moment. Et lors de la prochaine conférence, nous allons implémenter le vote de lecture de sorte que lorsque l'utilisateur clique sur le bouton Play, il vous redirige vers le composant de rediffusion où le film commencera à être diffusé. Ça va être intéressant. Je vous retrouverai lors de la prochaine conférence. 88. 86 Marge cohérente: Très bien, donc si vous observez attentivement, vous vous rendrez compte que nous n'avons pas de marge constante. Permettez-moi de vous montrer le contenu ici , à savoir la description, le titre et les boutons. La marge gauche est de cinq RAM. Mais lorsque vous observez le haut, vous vous rendrez compte que le logo Netflix n'a même pas de marge sur la gauche. Donc, ce que nous allons faire, c'est également spécifier la marge restante en phi de RAM afin que tout commence à partir de la même ligne. Pour ainsi dire. Revenez maintenant au code VS, puis ouvrez en haut. Maintenant, comme ceux-ci, vous devez faire défiler l'écran vers le bas jusqu'à ce que nous ayons le côté gauche. Sur le côté gauche, nous sommes là. Très bien, est-ce que c'est l'écart pour percuter ? Marge gauche ? Faisons en sorte que ce soit cinq rem. Vous voyez maintenant que tout est en ordre ? Si vous observez le coin supérieur droit de l'écran, vous vous rendrez compte que le bouton de déconnexion sort presque de l'écran. Je n'aime pas ça. Alors venez ici, nous allons chercher le bon côté. Juste à côté où vous, voici la marge, non ? Élargissons la gamme. Je vois Save. Magnifique. Nous avons maintenant un design très beau et mature. C'est beau comme ça. Passons à la prochaine conférence où nous concevrons la société de lecteurs de films. 89. 87 composantes VideoPlayer: Très bien, donc dans cette conférence, nous allons créer le composant lecteur vidéo. Mais avant de continuer, nous devons implémenter le OnClick pour ce bas, qui est le bouton Play. Ainsi, lorsque l'utilisateur clique sur le bouton Play, il est redirigé vers le lecteur vidéo. Revenez au code VS, Netflix. Nous devons importer, utiliser la navigation. Où faisons-nous cela maintenant ? OK, regardez ça, le meilleur NEF. Je vais le couper, venir ici et le coller. Il s'agirait donc des informations que nous recevrons de la bibliothèque, et ce seront les contributions de nos propres entreprises. Donc, ici, je vais le faire en pots, utiliser Navigate from React, router dome. Ici, nous devons l'initialiser. Je vais faire du const, naviguer. Un utilisateur navigue. Bien sûr, c'est une fonction. Nous devons donc faire quelque chose comme ça et revenir à la pièce achetée ici. Je vais faire onclick, onclick of the body. Nous allons accéder au joueur. D'accord, laissez-moi vous montrer à nouveau le composant de l'application. Je n'arrête pas de vous les montrer. Vous pouvez voir que voici l'itinéraire et nous allons accéder à ce composant qui s'appelle Player Command B. Et les pages, les pages, le lecteur, la page du joueur, enregistrent, enregistrent sur le navigateur. Cliquons sur ce bouton et boum, nous sommes ici, directement sur la page de jeu. Tu peux voir la pièce en haut ? Bien. Fermez-le, fermez-le, puis fermez-le par le haut. Il ne nous reste plus que le point g du joueur. Donc, ce que nous allons faire ici, dans la composante joueur, c'est avoir un conteneur partagé. Encore une fois, assurez-vous que la rate du continent est correcte cette fois-ci. OK, importons Stout à partir des composants de départ. Et ce conteneur de joueurs, const, conteneur de joueurs est égal à stout.df, puis à la banquette arrière. Très bien, tout ira bien. Définitivement. Vous avez un DVI, donnez le nom de classe clear, juste au moment où le joueur div, un autre div avec le nom de classe de la flèche arrière, à droite. Pour ramener la flèche arrière, nous allons afficher le BSR vers la gauche. Et cette icône BSR à gauche provient de l'icône React dans les pots soit S, flèche gauche des icônes React Dash. Et bien sûr, nous allons résoudre le problème avec BS. Les bus sont laissés tels quels. OK, c'est bon. Maintenant, je vais faire en sorte que la flèche VS affiche l'icône vers la gauche ici. Ensuite, nous allons spécifier le onclick. Que se passe-t-il lorsque l'utilisateur clique sur cette icône ? Nous voulons revenir à la page Netflix. Donc, en un clic, je vais le faire. Maintenant, nous avons moins un et fermons-le, ce que l'étiquette à fermeture automatique. Nous avons donc maintenant deux entrées utilisées, naviguez-le et initialisez-le. Revenons à la page Netflix et copiez-la. Je vais copier notre navigation à partir d'ici. Viens ici, collez-le à nouveau, ici, copiez l'initialisation et collez-le ici. Tout est cool. Donc, juste après le div de fermeture du nom de classe (flèche de retour), nous allons avoir ici dans ce div le nom de classe du joueur. Oups, ça devrait être un joueur, s'il te plaît. Nous allons avoir la balise vidéo, video sRc. Copions donc la bande-annonce depuis la barre de code halo , puis collons-la ici. Il s'agit du lien vers la vidéo plus près avec une balise à fermeture automatique, moins que les paramètres nécessaires ne soient respectés. Avant de procéder aux paramètres, enregistrons, voyons ce que nous avons. Rafraîchissons-nous. Vous voyez que nous avons la vidéo ici ? Pour l'instant. Vous ne pouvez pas lire la vidéo. Et oui, nous allons donc effectuer les réglages nécessaires. Nous allons activer la lecture automatique. Ensuite, nous allons faire une boucle. Et les commandes. Faisons le muter pour qu'il ne fasse pas de bruit. Lorsque vous actualisez. Vous voyez, d'accord, supprimons moins que déplaçons les mutants. Nous avons maintenant les commandes de tout ce qui fonctionne. Ah oui. Tu vois ça ? C'est bon. Donc, ce que je vais faire maintenant, c'est styliser les vidéos et tout fonctionnera parfaitement. Très bien, Brenda Starr, joueuse Component Dot. La largeur. Faisons en sorte que la largeur soit 100 (largeur de vue), la hauteur, 100 (hauteur de vue), points. Flèche arrière. Laisse-moi te montrer. C'est celui qui loue de l'argent. S'assure que l' orthographe est correcte. Avoir avec position absolue. Le rembourrage est égal à deux ou à un indice M, Z, tiret. Faisons-en un. Comme V G, pour que l' icône soit précise. La taille de la police sera, qui correspond à la taille de l'icône. Faisons en sorte que ce soit un pointeur causal à trois rem. Je vais faire ici la couleur du SVG, couleur, blanc. Voyons ce qui va se passer. Nous y voilà. Il est maintenant temps de styliser la vidéo. La vidéo, ce que je vais faire, je vais faire de la hauteur à 100 %. Nous avons 100 %. Une fois cela fait, enregistrez le projet et dans le navigateur. Cliquons sur le panneau arrière. Tout fonctionne parfaitement bien. Très bien, amusons-nous. D'accord, c'est bon. Merci beaucoup. Et c'est tout pour le moment. Au cours de la prochaine conférence, nous commencerons à concevoir les cartes de telle sorte que nous commencerons à concevoir les cartes de telle sorte que l'affichage du film ici soit très intéressant. Rendez-vous lors de la prochaine conférence. 90. 88 carte cinématographique: Bon retour à tous. Dans cette conférence, nous allons concevoir composants de la carte de telle sorte que lorsque l'utilisateur passe la souris sur le montage, la bande annonce du film apparaisse, ainsi que le reste des informations, telles que les canots de sauvetage le bouton Je n'aime pas du panneau Ajouter deux favoris. Alors, sans plus tarder, allons-y. Revenez à la commande B du code VS pour ouvrir l'explorateur. Donc, directement dans le composant, nous allons créer un nouveau fichier appelé card dot js are EFC, qui est une mer agitée, pour générer le composant fonctionnel de la flèche, fermez l'Explorateur. Et encore une fois, Command P. Nous allons rechercher Netflix pour afficher ce composant, à savoir que droits des composants de la carte se trouvaient sur la page Netflix. Je suis là. Nous allons donc afficher les composants de la carte ici. Lorsque je fais cela, le composant de la carte sera importé en haut pour moi défilera automatiquement vers le haut. Vous pouvez donc le voir ici. OK. Assurez-vous donc d'importer la société émettrice de la carte dans la baignoire. Je suis là, économisez. Nous allons donc effectuer les entrées nécessaires, par exemple, en haut, nous allons importer le crochet américain. Et bien sûr, j'espère que vous savez qu'ils utilisent TikTok en tant que fonction. Nous devons donc absolument l'invoquer lorsque nous voulons l'utiliser. Nous devons également importer les navigations d'utilisation depuis le dôme du routeur React. Encore une fois, nous devons importer du Stout à partir de composants Stout. Cela fait, importons les icônes nécessaires à utiliser, telles que l'icône lumineuse, l' aversion, etc. Ne vous inquiétez pas, j'ai déjà préparé les icônes. Donc, ce que nous allons faire, c'est copier et coller, non ? Nous sommes dans le pouvoir du code. Et ce sont ceux-là. Donc, surligner et copier les icônes ici ne serait pas considéré comme une aide. Montez en haut et collez. C'est aussi simple que cela. Le cercle pointu provient donc des icônes de Riyad et nous l'avons refait surface avec celles-ci. Donc, toutes les icônes proviennent en fait d'icônes de Riyad. Pas de quoi s'inquiéter. Après l'avoir fait. Déclarons les variables d'état nécessaires à utiliser. Tout d'abord, nous allons faire de const On Whole Bad Karma, sur Hovered. Ensuite, nous allons faire de même, utiliser les États. Bien sûr, il s'agit d'une fonction et ce sera une opération booléenne, donc l'état initial sera faux. Oui, une fois cela fait, nous devons également initialiser la navigation américaine ici. Viens ici. Je vais faire de la const, navigation, de l'eau, utiliser Navigate. C'est aussi simple que cela. Cela fait, passons à la conception. Viens ici. Nous allons avoir un conteneur const, coupé. Commencez par point div, puis, juste au moment où les bactéries, c' est-à-dire, c'est là que le style aurait lieu. Copiez le contenant de la carte. Ensuite, nous allons emballer l'ensemble de la demande avec le contenant de la carte. Ouvrez la balise, puis collez et fermez la balise. Ces moments forts, ce gars, emménagez-le. C'est aussi simple que cela. Ce que nous devons faire maintenant, c'est-à-dire effacer tout cela de l'intérieur, c'est exposer l'affiche. OK, donc ce que je vais faire c'est IMG, SRC, equa. Je vais vous montrer le lien vers l'image de l'affiche. Le voici surligné et copié. Viens ici, colle plus près avec une étiquette à fermeture automatique. Et dans le tag, Faisons les réglages nécessaires, tels que les cotes, estimation, les chances d'être une affiche de film. Donc, si l'image ne s'affiche pas, ce sera l'alternative. Ensuite, ici, nous allons spécifier le onclick. Cliquez sur l'affiche. Nous voulons être redirigés vers le composant Play Movie où nous commencerons à lire le film correspondant. Donc, ce que je vais faire maintenant c'est comme ça , puis je vais faire Naviguer Slash Player. Nous allons le tester. Enregistrez dans le navigateur. Cliquez. Magnifique. Tout fonctionne parfaitement bien. OK, bien. Donc, avant de poursuivre, je veux que nous fassions quelque chose de très, très rapidement. Parce que tu dois bien comprendre tout ça. Venez ici, appliquons le style au conteneur découpé, donnez-lui une largeur maximale de 30 pixels. Alors je veux te montrer quelque chose. Donnons-lui une couleur de fond. Faisons en sorte qu'il soit rouge. Si je commence, je veux juste partir. La largeur maximale du coffre-fort sur le navigateur, pouvez-vous voir que le conteneur découpé est réellement couvert partout ici ? Tu vois, c'est exactement ce que je voulais te montrer. Maintenant que c'est fait, continuons. Configurons Hoover pour ce porte-cartes. Ainsi, lorsque l'utilisateur passe la souris sur le porte-cartes ou sur l'affiche du film, pour être précis, nous voulons que la bande annonce et certaines informations s'affichent . Alors laissez-moi vous montrer ici. Ce que nous allons faire maintenant, c'est comme ça. Nous allons entrer notre souris. Ce que nous allons faire, c'est mettre à jour l'état initial. L'état initial ici est faux. Nous devons donc appeler la fonction de configuration pour mettre à jour l'état initial. Et bien sûr, voici exactement comment procéder, puis réglez-le sur false. Maintenant, ce que je vais faire, c'est que nous devons l'implémenter juste après la balise IMG de fermeture. Nous allons le faire si Hoover est un quadrupède et nous voulons montrer informations sur la TVA, sinon ne faites rien. Donc ici, si l'ANOVA est tout à fait vraie, il suffit de recopier cette balise IMG, de la surligner, de la copier et de la coller ici. Assurez-vous de formater le code pour le rendre un peu propre. Donc, par exemple, je dois juste enregistrer, revenir au navigateur, besoins. Rien ne se passe. C'est simplement parce qu'à la saisie de la souris, nous devons mettre à jour les états initiaux pour qu'ils soient vrais et non faux. C'est tellement génial, comme ça. D'accord, donc lorsque l'utilisateur place la souris sur l'affiche du film, nous devons mettre à jour l'état initial à vrai. Et puis ici, nous appelons la fonction de configuration, sommes prêts à mettre à jour l'état initial, qui est faux. Nous allons le mettre à jour pour qu'il devienne vrai. Et puis l'effet de survol, qui est cette image, apparaîtra. Encore une fois. Cela fait, nous allons faire le maximum de feuilles pour que lorsqu'ils utiliseront, je retirerai la souris, les feuilles de souris acquièrent. Nous devons également mettre à jour l'état initial pour forcer presque le départ. Copiez donc tout ici et collez-le tel que mis à jour sur false. Donc, après avoir fait cela, vérifions-le. Lorsque vous survolez, vous voyez ce type ici, et lorsque vous retirez la souris, elle disparaît, presque Entrée, vous voyez l'effet de survol presque disparaître, tout redevient normal. De plus, en passant la souris dessus, nous voulons garantir la bande annonce correspondante des pâtes. Nous allons donc avoir une vidéo , puis jouer à une GS. Les points forts de la vidéo se trouvent ici après la balise de fermeture de l'IMG. Le texte collé ici montre une erreur et je ne sais pas pourquoi. D'accord, ne vous inquiétez pas, c'est simplement parce que nous devons l'emballer dans un contenant parent. Donc, ce que je vais faire maintenant, accord, ne serait-il pas caché ici. Nous allons faire div, lui donner le nom de classe Hoover, non ? Dans ce div, nous allons avoir un autre div avec le nom de classe image, dash, video, dash, Wrapper. Copiez tout ici à partir des lignes 2092, des lignes 36, des coupes. Mieux vaut que le div avec le nom de classe de l'image, de la vidéo ou de l'APA ne formate pas le code, enregistre pas l'application, ne revienne au navigateur. Encore une fois Hoover. Maintenant, tout fonctionne comme prévu, mais nous n'avons pas stylisé ce composant, alors ne vous attendez pas à ce qu'il soit propre et beau. Pour l'instant. Mais ça n'a pas l'air moche. Les caméras sont éteintes et tout fonctionne parfaitement bien. J'ai encore trop parlé. Donc, juste après le div de fermeture du wrapper vidéo d'images contenant le nom du cluster, nous allons avoir un autre div avec le nom de classe du conteneur d'informations. Dans un conteneur Dodge complet, non ? Ne serait-ce pas le conteneur d'informations, nous aurons plusieurs icônes qui s'afficheront lorsque la carte sera Harvard. Nous allons donc avoir une balise historique et cette histoire juste à l' intérieur, je vais faire une notice rouge parce que nous voulons également afficher le titre du film, lui donner un nom de classe. Nous allons également l'appeler le nom du film. En cliquant sur le nom du film, nous voulons accéder au composant où le film correspondant sera diffusé. Ici, spécifiez OnClick. Donc, juste après la dernière balise de l'histoire, nous allons avoir une autre division. Et ce div va contenir toutes les icônes qui seront utilisées. Je vais donc appeler cela div icons rights dans le div du cluster d'icônes. Nous allons avoir un autre div, lui donner un nom de classe de contrôles. Parce que nous allons y avoir plusieurs icônes de commandes. Nous allons maintenant afficher la première icône. Je vais mettre une casher. Fermez-le à l'aide de l'étiquette à fermeture automatique située juste à l'intérieur. Donnez-lui un titre à la pièce et cliquez sur cette icône, nous voulons être redirigés vers la société de lecteurs de films. Juste après la fermeture de la boutique Audio Play Soccer, nous en ouvrirons une autre. Roi lève le pouce, j' ai envie de lancer. Et je vais lui donner un titre de lumière, de surligner, de le dupliquer. Et puis voici nos articles en bas de page. Et ça va être détesté. L'utilisateur peut modifier comme le film ou ne pas aimer. Un autre. Ici, BS va cocher pour titre et le supprimer de la liste. J'ai esquissé des parcelles, je leur ai donné un titre ou je les ai ajoutées à ma liste. Donc, après avoir fait cela juste après la fermeture du div des contrôles de nom de classe, nous allons avoir un autre div avec le nom de classe close it down. Donnons-lui un nom de classe. Infos. Récapitulation de la baie de Bh. Donnez-lui un titre pour plus d'informations. Plus près, avec la balise à fermeture automatique juste après le div de fermeture des icônes de noms de classe comme celle-ci, ce div qui se termine aux lignes 54. Nous allons avoir un autre div avec le nom de classe January. Nous allons donc avoir un film généreux. Ici. Nous voulons les afficher avec une liste non ordonnée. À l'intérieur de. Vous allez avoir un tag LI. Je vais donc passer à l'action. Vous pouvez donc, simplement parce que cela va se faire de manière dynamique. Nous pouvons donc avoir ce genre de choses ici. Lorsque vous enregistrez l'application. Voyons ce que nous avons sur le navigateur. OK, passons à l'aspirateur. Tu peux voir tous les arrêts ici ? Tequila, jouez, le décalage, n'aimez pas, ajoutez et supprimez. Nous avons de nombreux arrêts ici. Très bien, c'est donc ce que nous avons pour le moment. Je comprends parfaitement que ce n' est pas beau, mais je peux vous assurer que ce n'est pas laid non plus. Alors ne t'inquiète pas. Dans la prochaine conférence, nous commencerons à styliser cette entreprise. 91. 89 cartes css: Très bien les gars, alors stylisons rapidement le composant de la carte. Revenez au code VS, faites défiler la page vers le bas. Et ici, nous allons supprimer ce commentaire. Nous allons donc lui donner une largeur maximale de 230 pixels. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur et les identifiants. Vous pouvez maintenant voir que l' image est un peu plus grande, mais ne vous inquiétez pas, nous allons corriger ce problème. Et puis la largeur elle-même, que les photos lui donnent une hauteur de 100 %. Le curseur sera un pointeur. Mettons-le en position relative. Nous voulons maintenant cibler l'IMG directement à l'intérieur. Alors je vais faire de l'IMG. Donnons-lui un rayon de bordure, 0,2 ram. Oh mon Dieu, ce type continue, je ne sais pas pourquoi. La largeur 100 %, la hauteur 100 %. Indice Z. Faisons-en dix. Lorsque vous enregistrez, consultez le navigateur, vous voyez que ça a l'air bien comme ça. L'affiche est en fait très petite, mais elle va bien. n'y a aucun problème. Continuons. Maintenant. Commençons à travailler sur le survol. Ainsi de suite Hoover, DOD, Hoover. Et l'utilisateur joue à la souris sur l'affiche du film comme ceci. Vous voyez que toutes ces colombes ne sont pas alignées, nous devons donc tout mettre en place pour qu'elles apparaissent bien. Tout d'abord, nous allons avoir le z-index. Neuf bénins. Donnons-lui la hauteur maximale du contenu. La largeur sera de 20 jantes. La position est absolue. Mais maintenant, nous ne voulons pas le placer directement sur le dessus. Laissez-moi vous montrer, enregistrez l'application. Retournez au navigateur. Lorsque vous survolez, pouvez-vous voir ? Tu vois ? Nous ne voulons donc pas le placer directement dessus. Nous avons donc voulu nous détendre un peu. Donc je vais faire du haut -18 V H en partant de la gauche , ce sera Zara. Donnez au rayon de bordure 0,2. Rem. Encore une fois, regardez ces gars, j'en suis désolée. Donnez la bordure, nous allons faire Joe point 1RM, en gris uni. Et bien sûr, la RAM doit être la même que la valeur, la couleur d' arrière-plan, je vais faire 181818, Transition, 0,3 s, c'est fini. Ainsi, lorsque vous passez votre commande, le navigateur passe la souris dessus. Laissez-moi vous montrer, pouvez-vous voir que cela prend forme progressivement. Vous ne vous en rendez peut-être pas compte pour instant car tout est sombre. Mais je peux t'assurer. OK, allons-y. Pour les points d' emballage de l'image et de la vidéo. Laisse-moi te montrer ici. Dura de l'imagerie. Où êtes-vous ici ? S'agit-il de surligner, de copier , de points, d'émettre un emballage vidéo , puis de le positionner par rapport. La hauteur est de 140 pixels. Et en ce qui concerne les droits de balise IMG dans le conteneur d'images et de vidéos, nous allons lui attribuer une largeur de 100 %. Les hauteurs de 150 pixels. L'objet s'adapte à la housse. Rayon de bordure : plage de 0,3. Du haut de la page Zara. Son indice z sera de quatre ici. Alors mettons-la en position absolue. OK, pour la vidéo, d' accord, dans le Hoover. Encore une fois, pour la vidéo, elle aura exactement les mêmes dimensions, me suffira donc de la copier-coller ici. Enregistrer. Maintenant, désactivons le navigateur. Jette un coup d'œil. Voyez-vous qu'il prend progressivement forme ? Encore une fois. Finalisons-le. Pour le conteneur d'informations dans un conteneur à quatre tirets. Laissez-moi voir de là-haut, ce que nous avons dans les contenants alimentaires, les gars restent, doit être un exercice grammatical ici. Parce que si vous orthographiez mal les noms des classes, vous allez tout gâcher vous-même. Nous allons donc lui faire afficher colonne Flex, Flex Direction. Aussi bon que le rembourrage d'un bras. Donnons-lui un écart de 0,5 rem. Enregistrez sur le navigateur, Hoover dessus. Vous voyez maintenant comment tout se déroule progressivement. Pour les icônes, les points, voyons à quoi correspond le regroupement des icônes. Il y a aussi des icônes ici. Ne te moque pas de moi. J'essaie juste d'être précis pour ne pas avoir de problèmes. Faisons maintenant en sorte qu'il affiche la flexibilité, en justifiant l'espace entre les contenus. Stylisons le SVG pour que la couleur apparaisse bien. SVG. Tout d'abord, je veux lui donner une couleur. Donc, la couleur du SVG sera, faisons en sorte que ce soit comme ça. Sept. Jetez-y un coup d'œil. Oh, oui. Tu peux voir maintenant ? Finissons-en. Donnons-lui une bordure de 0,100 REM, rayon de bordure blanc uni. Nous voulons sa sous-classe, donc je vais utiliser une taille de police de 50 %. Le cas est la transition du pointeur. Il va avoir 0,3 s de sortie ou entrer et sortir facilement. Pour ainsi dire, vous l'avez, sauvegardez et voyez ce que nous avons. Kim, tu vois ? OK, nous pouvons donc réellement changer la couleur du SVG en blanc. Je pense que ce sera mieux. Oui, il s'en sort mieux comme ça. Faisons donc l'ANOVA. Lorsque vous passez la souris sur le SVG, la couleur sera la suivante. Essayons-le. Prends-le. Tu peux voir ? C'est bon, comme si c'était bien. Donc, si vous observez attentivement, vous vous rendrez compte qu'il n'y a pas d'espace entre les icônes SVG. Donc, ce que je vais faire, c'est écrire « Apportez les icônes ici ». Nous avons un autre style, le contrôle, le point, les contrôles. Faisons en sorte qu'il affiche Flex. Alors donnons-lui un écart d'un rem. Enregistrez l'application. Maintenant. Vous voyez, je pense que l'écart d'un rem est en fait trop important pour cela. Faisons 0,5 rem. Cool. C'est très bien. Bêta-rien. OK, donc avant de poursuivre, je voudrais vous montrer quelque chose ici. Vous voyez cette icône. Permettez-moi de partager ici div avec le nom de classe des icônes. C'est la division ici. Ça s'arrête ici. Il regroupe donc les commandes et tous les SVG. Alors voici ce que je vais faire, voici les icônes. Il regroupe tous les SVG. Je vais donc le couper à partir d'ici, coller ici pour le fermer et le compter. Donc, juste après cela, nous allons générer des points. Faisons en sorte qu'il affiche la liste non ordonnée. Faites également en sorte que l'écran soit flexible. L'écart. Faisons en sorte que ce soit une course à vin. Le schéma des alliés, c'est vrai, va être de 0,7 rem. Donc je vais le faire ici sur Fest of type. Nous allons faire en sorte que le type de départ soit nul au moins. Nous voulons donc supprimer les points et tous les arrêts. Donc, le style de liste et le type seront connus lorsque vous enregistrerez le navigateur. OK les gars, il semble que toutes ces villes n' affectent pas les généreux. Voyons donc quelque chose en haut. Nous sommes en janvier. Tu vois ? C'est exactement pourquoi je continue à le vérifier , car parfois cela peut être faux. Alors, faisons en sorte que ce soit généreux comme ça. Oui, Save. Maintenant, tout va bien fonctionner. Donnons-lui une couleur ici. La couleur va être large. Enregistrer. Encore une fois. Vous voyez maintenant qu' il ne nous reste plus que le titre. Permettez-moi donc de vous montrer où se trouve ce titre. C'est en haut à droite. Maintenant ? Le nom de la classe est en train d'être déplacé. Je vais donc copier directement dans le conteneur d'informations. Voyons le conteneur d'informations, où vous, voici le conteneur d'informations. Ensuite, nous allons faire le nom du film Dada. Donnons-lui une couleur blanche afin que vous puissiez décider de le styliser si vous le souhaitez, et comme vous le souhaitez lorsque vous le survolez. Tu peux voir ? Maintenant, tout fonctionne parfaitement comme prévu. Jette un coup d'œil. Lorsque vous cliquez sur le titre, vous êtes redirigé vers le bas. D'accord. Alors les gars, une chose que je n' aime pas, c'est qu'il n'y a pas d'espace entre la carte et cet autre composant. Donc, ce que je vais faire maintenant, c'est spécifier une marge en haut de la page. Et faisons-en une seule pièce. Vous voyez maintenant qu'il y a un espace entre les imprudents. Lorsque nous commencerons à implémenter les films, tout sera beau. Mais pour l'instant, examinons à nouveau la carte. OK, une autre chose que j'ai remarquée ici, c'est que lorsque vous passez la souris dessus, vous pouvez voir qu'il descend. Ce n'est pas le résultat escompté. Oui, ça devrait aller au sommet. Et je pense que cela corrigera le fait que le sommet est censé être à -18 VH. Je sais que la plupart d'entre vous n'auront peut-être pas problèmes ici parce que j'ai déclaré que c'était 18 contre, mais typographiquement, j'ai sauté la haie. Enregistrez donc sur le navigateur. Tout fonctionne bien comme prévu. C'est génial, j'adore ça. Voilà, c'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 92. 90 clé api: Bon retour à tous. Dans cette conférence, nous allons commencer à travailler avec l'API. Et l'API que nous allons utiliser dans ce cours est l'API de base de données de films. Alors, passez rapidement à Developer as Dots, les films db.org. Et puis, juste ici, dans l'introduction, zoomez et laissez-moi vous montrer. Vous devez cliquer sur le lien de l'API. Cliquez. Et lorsque vous le faites, un nouvel onglet s'ouvre. Dans le coin supérieur droit de l'écran, vous verrez la CMDB conjointe. OK, alors cliquez ici pour vous inscrire. Ce que vous allez faire, c'est saisir vos informations d'identification. Mon nom d'utilisateur sera donc une barre d'outils. Mon mot de passe, bien sûr, je ne vais pas vous dire de quoi il s'agit, afin que vous puissiez faire ce que vous voulez de votre côté. Assurez-vous que votre mot de passe est correct. Mon e-mail, je vais le faire. OK, passons à ahaystack@gmail.com. Alors je vais m'inscrire. À l'heure actuelle. Un e-mail de confirmation m' a été envoyé. Donc, ce que je vais faire, c'est ouvrir mon compte Gmail. Et puis le voici. Je dois cliquer sur ce bouton pour activer mon compte. Et boum, une fois cela fait, vous pouvez saisir votre nom d'utilisateur et votre mot de passe. Vous pouvez revenir ici, me laisser vous montrer, puis saisir votre mot de passe. Ce sont toutes les mêmes choses. Je vais enregistrer le compte et tout le reste. Fermez ça, fermez ça. Et maintenant, vous serez redirigé vers votre page de profil. Ce que vous allez faire ensuite, c'est apparaître ici dans cette icône de déconnexion située dans le coin supérieur droit de l'écran. Cliquez pour basculer dans la navigation , puis cliquez sur Paramètres. Nous sommes dans les paramètres, il vous suffit de cliquer sur l'API. Et puis, en haut, cliquez sur Créer. Et il indique le type d'API que vous souhaitez enregistrer, développeur ou professionnel. Je dois juste me développer ici. Ensuite, vous devez lire tous ces termes et conditions. Fais-le si tu le souhaites. Indépendamment du fait que je n'ai pas lu les termes et conditions, je dois quand même les accepter. D'accord. Amende. Le nom de l'application sera Netflix project. L'URL. Ce que nous allons faire maintenant, c'est copier et coller mon URL YouTube ici. Parce que pour l'instant, supposons que vous n'avez pas de site Web. Je dois juste aller sur YouTube. Et puis voici ma page YouTube comme celle-ci. Copiez l'URL. Vous pouvez copier n'importe quelle URL de votre choix. Je ne pense pas que cela importe. Collez-le ici. Je vais faire le résumé de la candidature. Il s'agit d'exemples de sites Web de films que vous pouvez décider d'écrire. Le test est terminé. I FirstName et LastName. Son X, K. Mon e-mail est déjà là. Mon numéro de téléphone. Je dois juste faire quelque chose comme cet article, 23581400, 3755. Et au fait, c'est mon vrai numéro de téléphone. Que je ne le vois pas du tout. Pour l'adresse, nous allons juste créer une adresse temporaire, la surligner, la copier, venir ici, coller, toutes ces choses. Est-ce vraiment important ? D'accord ? La ville, je vais faire l'État du Delta, d'accord, désolée la ville va être, allons-y, faisons-le ici. Ici, je vais faire des cassettes Deltas et le code postal. Encore une fois, quel est le code postal ? Je pense que c'est 32 zéros. Y en a-t-il ? Ai-je raison ? Il vous suffit donc de renseigner votre adresse sur vos coordonnées ici, puis de cliquer sur le bouton Soumettre. Merveilleux. Nous avons donc ici la clé API. Permettez-moi de vous montrer qu'il s'agit de la clé API, et laissez-moi vous montrer une autre chose dont vous devez prendre note. Je voudrais zoomer un peu plus haut. Comme si c'était l'URL de base. Ainsi, lorsque vous accédez à cette URL de base, vous devez cibler le contenu que vous souhaitez phager, en l'occurrence le film, la barre oblique, peu importe. Ensuite, ils placent la clé API et le font. C'est donc exactement ainsi que vous utiliserez votre clé d'API. Vous spécifiez notre URL de base, notre cible, ce que vous voulez insérer, dans ce cas un film, et vous faites quelque chose comme ça. Vous écrivez donc ici cette requête pour spécifier la clé d'API, et la clé d'API est égale à d. Donc, dans ce cas, ma clé d'API est la suivante. Oui, de votre côté, votre clé API sera différente. Donc, s'il vous plaît, ne copiez ma clé API car elle ne fonctionnera pas pour vous. Oui, donc tout ce que vous avez comme clé d'API est ce que vous devez utiliser de votre côté. Ajoutons-le rapidement au code VS et configurons-le correctement. Vs Code. Donc, ici, vous devez ouvrir les utilitaires, cliquer avec le bouton droit sur Nouveau fichier. Et nous allons créer le fichier appelé constantes, points, Jays, dont la constante G est, nous allons configurer l'URL de base et la clé d'API. Donc, ce que je vais faire, c'est une const ponctuelle. Mon API de soulignement, la clé de soulignement sera égale à, laissez-moi vous montrer, ouvrez les guillemets doubles et les droits entre guillemets doubles. Revenez en arrière. Assurez-vous de mettre en avant ce type ici, non ? Cliquez sur Copier. Voici donc ma clé d'API. Encore une fois, assurez-vous de copier et coller votre propre clé API ou de venir ici et de la coller entre guillemets, comme ceci. D'accord, donc chaque fois que nous voulons utiliser ma clé API, nous n'avons pas à l'appeler comme ça, d'accord ? Il suffit donc d' appeler ma clé API et elle récupérera la clé API qui se trouve ici. Je vais faire un spot const, un soulignement CMDB, une URL de soulignement. Ce sera donc le T MDB BaseURL. Également. Nous allons le copier et le coller directement entre guillemets. Revenez. Je vous l'ai montré plus tôt à partir du HTTPS, peu importe, peu importe ici. Deux, trois. Veuillez regarder ce que j'ai souligné, s'il vous plaît. Chris est venu ici comme ça. Encore une fois, nous avons terminé de configurer l'API. Dans la prochaine conférence, nous allons installer des boîtes à outils pour les rédacteurs et les configurer. Il existe une boîte à outils de dosage pour pouvoir récupérer des données. Rendez-vous lors de la prochaine conférence. 93. Boîte à outils 91 Redux: Dans cette conférence, nous allons configurer le redox pour ouvrir le VS Code, Control C pour arrêter le serveur en cours d'exécution. Donc, la première chose à faire est d' installer la clé redox two. Voici la commande d'installation. Copiez les surlignements, venez ici et collez. Cette commande se trouve directement dans le code hydropower. Appuyez sur la touche Entrée pour le faire démarrer. Don a été installé. Réussi. Allons y jeter un œil. Ouvrez le fichier package.json. Et le voici. Ferme-le. Maintenant, nous sommes dans le magasin. Cliquez avec le bouton droit sur Nouveau fichier. Nous allons créer un index dont le point g est. Et voilà que Lee est prêt à installer des jeux voltaïques. Nous devons donc d'abord importer , configurer la virgule étoile pour créer une synchronisation des polices. virgule crée des mensonges dans tous ces fichiers qui seront importés depuis les lecteurs pour les saisir. Une fois cela fait, déclarons l'état initial. L'état initial est égal, définissez-le sur un objet vide. Lorsque l'objet, nous allons avoir l'attribut des films comme étant une virgule vide, l'état initial du film le plus proche chargé. Ce sera une fausse virgule. Puis le généreux. Ce sera un tableau vide. Donc, dans ce cas, sont simplement les catégories du film qui sont généreuses. Et bien sûr, vous savez qu'un film peut appartenir à trois ou quatre catégories différentes. C'est du moins ce que nous essayons de faire. Nous voulons affecter les films par catégories. Ne t'inquiète pas. Quand nous commencerons à influencer les films, vous aurez certainement compris tout ce que nous faisons ici, mais sachez simplement que l'état initial des films est vide, l'état initial du Generous Loaded est faux et l'état initial des généraux que l'état initial des généraux est également une zone vide. En termes de simplicité, si le générateur n'est pas chargé, nous ne voulons pas récupérer le film, c'est aussi simple que cela. C'est pourquoi nous hissons ce drapeau ici. Donc, si la générosité est fausse, aucun film ne sera acheté. Le seul moment où nous allons chercher un film c'est quand nous allons chercher les généreux. Et en allant chercher les dîners, nous pourrons trouver les films appartenant à ce général en particulier. Je pense que vous le comprendrez certainement assez bien au fur et à mesure que nous passerons à autre chose. Ici, je vais faire Const, Netflix Slice. Nous allons donc créer les diapositives ici. Netflix Slice Equa, crée des diapositives, ouvre et ferme des parenthèses, ouvre et ferme des crochets bouclés. Et entre crochets, nous allons avoir le nom Netflix, karma, l'état initial. Ensuite, nous devons intégrer les réducteurs supplémentaires. Et puis en passant le Bouddha, le Bouddha à un objet vide. Nous y reviendrons dans un G si vous ne l'avez pas déjà fait. Enfin, nous devons exporter, const, stocker, le CWA, configurer le magasin. Toutes ces données seront stockées ici. Et ici, nous allons avoir un réducteur, réducteur de tranches Netflix. Bien. Une fois cela fait, la prochaine étape consiste à terminer l'ensemble de la demande auprès du fournisseur. Nous essayons donc de fournir à l' l'application tout ce que nous avons dans le magasin. Hein ? Nous sommes dans le SRC. Laissez-moi vous montrer en tant que RC. Il y a un fichier index.js ici. C'est ce que l'on appelle le fichier index.js de niveau supérieur. C'est donc ici que toutes nos applications seront visibles. Oui, donc ce que nous allons faire, c'est fournir à notre application le magasin afin que, quoi que nous fassions ici, nous puissions le transmettre à tous les autres ce projet, c'est aussi simple que cela. Enseigner, c'est bien, c' est beau. Ferme-le. Revenez aux droits du fichier index.js dans le SRC. Nous allons donc importer, nous allons importer le fournisseur depuis React Redox. Et encore une fois, nous allons importer l'étoile. C'est dans le domaine du sport, nous devons donc l'emballer entre crochets sur Dot Slash Store. Une fois cela fait, définissons l'ensemble de l'obligation chez le fournisseur. Nous allons donc visiter le stand, le stand Equa, le magasin juste ici. Et puis surlignez les éléments copiés et collés dans le cours de l'application pour formater le code. Enregistrez le projet. Viens ici, économise. Bien, nous sommes dans le terminal. Nous devons démarrer l'application. Voyons donc s'il y a un problème ici. Nous devons attendre un moment. Bien, absolument, pas de problème. Odds Command I pour ouvrir la console. Et ici, vous verrez qu' il n'y a pas de problème, n'est-ce pas ? Dans la console. Tu vois que tout fonctionne ? C'est bien. OK, nous avons donc terminé la configuration et l'installation de la boîte à outils redox. Et dans la prochaine conférence, nous commencerons à récupérer des données à partir du point de terminaison de l'API CMDB. C'est tout pour le moment. Assurez-vous de poser des questions si vous êtes confus. Rendez-vous à la prochaine conférence. 94. 92 genres de récupération: Dans cette conférence, nous allons aborder les aspects généraux du film à partir de l'API CMDB. Assurez-vous donc de mettre votre ceinture de sécurité, prendre votre café à côté de vous et de commencer. Juste au moment où vous êtes dans le fichier index.js, laissez-moi vous assurer que c'est bon. On ferme ou pas. Ce gars, nous en avons fini avec ça juste dans le stop index dot js. Laisse-moi faire un petit zoom arrière. Donc, la première chose que nous allons faire ici est d'installer ox, utiliser Control C pour arrêter le serveur en cours d'exécution. Et je vais utiliser la boîte d'installation du gestionnaire de packages node. L'installation est en cours. Viens au sommet. Nous devons également importer ma clé d'API de soulignement à partir des constantes de barre oblique de UT. Nous devons utiliser l'URL de base. Cette URL, que j'ai expliquée dans la conférence précédente lorsque nous avons créé notre compte pour le succès de l'installation axiale TM dB pour le suivant, est destinée à récupérer le généreux. Donc, juste en dessous des états initiaux, je vais le faire ici. Je vais faire de l'exportation, de la constitution, généralisation, de la générosité, égalité, créer un groupe de réflexion. Ouvre et ferme les parenthèses. Juste ici. Je vais utiliser Netflix avec une virgule généreuse. Ensuite, nous devons intégrer à la fonction asynchrone un récepteur. Et bien sûr, cela va revenir à une promesse. Nous allons donc attendre. Nous allons faire notre poids axial Dot Get. Alors, qu'allons-nous obtenir ? Nous allons faire en sorte que le film soit généreux. Et pour ce faire, nous devons d'abord cliquer sur l' URL de base, puis sur la barre oblique, liste des barres obliques des films, puis nous devons spécifier la clé d'API. Permettez-moi de vous montrer comment prendre rapidement le bug D, signe du dollar, les crochets ouverts et fermés. Et je vais créer CMDB BaseURL en dehors de la barre oblique entre crochets, de la barre oblique générale, de la liste des barres obliques des films. Ensuite, nous aurons une requête ici qui sera utilisée pour attribuer l'API. Je vais donc utiliser la clé de soulignement de l'API, equa, quelle que soit la clé d'API. Et je vais faire en sorte que ma clé API soit aussi simple que cela. Et tout cela, nous allons l'attribuer à une variable. Je vais faire des données const, const, les définir trop généreusement, puis les attribuer comme ceci. C'est aussi simple que cela. Tu peux voir ? Bien. D'accord, maintenant, nous allons revenir généreusement. C'est aussi simple que cela. Ajoutons-le aux réducteurs supplémentaires. Une fois cela fait, passez à la section « Extra Reduce us » pour ajouter les clés. Faites défiler vers le bas. Voilà, c'est vrai ? Nous sommes dans le Builder. Nous allons faire des points de Bouddha, ajouter des clés. Nous allons ajouter des dîners. Point comblé, plus calme, l'état et l'action. Ouvrez et fermez les crochets, à droite, pour y mettre, nous allons faire des points généraux, ce qui équivaut à la charge utile des points d' enchères. La charge utile sera constituée des données réelles. Et ici, je vais faire la dégénérescence de l' État. Nous devons le rendre vrai car en ce moment, nous préparons le dîner. C'est donc fait, essayons de garder le journal de la console. Le généreux journal à points de la console. Généreux, comme ça. Avec cela, ouvrez la page Netflix. Et en haut de la page, nous devons importer des intrants. Vous utilisez Dispatch pour que quelque chose se passe. Nous devons lancer une action. Ne t'inquiète pas, faisons-le pour que je puisse te montrer ce que je veux dire par là. Les importations utilisent ce passage de React Redox. Donc, ici, je vais faire Const, Dispatch Equa, utiliser ce patch, n'est-ce pas ? Je n'utiliserais pas d'effets. Nous devons envoyer l'action, la faire défiler vers le haut et réduire le nombre de saisies. Ils utilisent des effets dans une baignoire. Effet du crochet React. Et nous devons l'invoquer. Et bien sûr, vous savez qu'ils utilisent des prises d' effet en paramètre. L'une est la fonction et l' autre est la virgule de dépendance r0, la dépendance ici, juste à l'intérieur, que nous allons envoyer. Quelles mesures devons-nous prendre ici ? Nous voulons envoyer ce type ici, c'est ce qui sera généré. C'est donc ce qu'il serait capable de récupérer les données. Alors allez sur Netflix point js et nous allons expédier. Sois généreux. Bien sûr, dîner est une fonction. Et assurez-vous de l'importer en haut, comme ceci. Une fois cela fait, revenez au terminal. Démarrons l' application une fois de plus. Découvrez ce que nous avons sur la console. Espérons que tout ira bien. Il dit que les axiomes ne sont pas définis. Nos bons gars retournent à index.js. En haut, nous avons deux entrées. Acts utilise depuis l'axe, comme celui-ci, enregistre à nouveau l' application , et cette fois-ci, nous allons la faire fonctionner. Mais commandez I d' ouvrir la console. Et juste à l'intérieur de la console, vous voyez déjà une zone là-bas. Ouvrez la zone. Et nous avons le film Generous. Vous y trouverez de l' action, de l'aventure, l'animation, de la comédie, du documentaire, la famille, de la fantaisie et bien plus encore. Alors les gars, c'est extrêmement fantastique et j'adore ça. Maintenant, nous avons réussi à récupérer le film Generous. N'est-ce pas magnifique ? Bonjour. Ainsi, lors de la prochaine conférence, nous procéderons à l'adaptation des films eux-mêmes en nous basant sur les généraux du cinéma. Nous devons donc adapter les films en fonction de chaque catégorie, c'est aussi simple que cela. Rendez-vous lors de la prochaine conférence. 95. 93 films: Bon retour à tous. Lors de la conférence précédente, nous avons pu récupérer les dîners cinématographiques à partir du point de terminaison de l'API TM DB. Et ils sont là. Dans cette conférence, nous allons donc récupérer les films depuis le point de terminaison de l'API. Accédez rapidement à VS Code et continuez moins. Avant d' aller chercher les films. Il y a certaines conditions de réglage que nous devons garder à l'esprit. Et en fait, nous devons énoncer ces conditions. Nous ne voulons donc pas simplement adapter toutes sortes de films. Le seul type de film pour lequel nous voulons récupérer les films avec le chemin de fond, est-à-dire les films avec l'image de l'affiche. Donc, si le film n'a pas d'image d'affiche, nous ne voulons pas l'adapter également à ce film. Avant de pouvoir adapter un film, nous devons nous assurer que les genres de films sont disponibles. Donc, si les genres de films ne sont pas chargés, nous ne voulons pas adapter ce film. Oui, alors implémentons-le rapidement avec du code. Avant de continuer, je pense que nous devons placer un commentaire sur ce journal de console afin qu' il ne dérange pas. Oh, magnifique. La console est maintenant vide. Viens ici. Nous allons donc avoir un tableau constant de données vidéo égales. Maintenant, nous allons prendre en compte quelques paramètres : tableau virgule, films, virgule. Généreux. Réglez-la sur une fonction de flèche. OK, très bien. Nous allons donc, pour chacun, voir le film ici, point RA pour chacun. Maintenant, nous allons avoir une zone de cinéma ici. Gamme de films Const. Réglez-le sur un tableau vide comme celui-ci. Maintenant, un point vidéo, des identifiants de soulignement généraux, des points pour chacun d'eux. Ensuite, nous allons , en général, encore une fois, le régler sur une fonction de flèche. Ouvre, ferme, crochet bouclé, constante, nom est égal à des points généreux, trouve. Donc, ce que nous faisons ici, c'est rechercher les généreux avec leur carte d'identité. Donc, si les généreux existent, nous devons extraire le nom du général et intégrer à notre tableau, c' est aussi simple que cela. Ouvrez et fermez les parenthèses et juste entre les parenthèses, ouvrez et fermez les crochets bouclés, en prenant l'identifiant puis en dehors de l'identifiant des parenthèses, nous allons faire des égaux à id. Et puis ici, nous devons écrire la condition. Si. Donc, lorsque nous trouvons le généreux par identifiant, il ne nous reste plus qu' à extraire le nom et à l'insérer dans cette gamme de films. Je veux donc changer le nom de cette série de films pour quelque chose de plus lisible. Et je vais faire des films en général. Je pense que ce sera plus lisible. Movies January, quelque chose comme ça. Donc, si nous trouvons également le dîner, nous devons déplacer ses généraux, point push. Nous devons les intégrer au réseau. Et je vais faire un nom, des points, un nom. C'est aussi simple que cela. fois cela fait, la prochaine étape consiste à vérifier si le film a une toile de fond, c' est-à-dire s'il contient une affiche ou une image de film. Nous allons donc avoir la maladie ici. Si le film est ponctué de tracés de toile de fond, soulignez le tracé. Si le film avec la trajectoire en toile de fond existe, alors nous devons l'intégrer à la gamme de films que nous passons ici. Tous ces poêles s' expliquent d'eux-mêmes. Mon explication est assez simple, donc vous obtenez certainement les G. Donc je vais faire Movie Array Dot Bush. Alors, que préconisons-nous exactement ? Nous avons besoin de la carte d'identité. Je vais créer Movie Dot ID séparé par une virgule. Oh mon Dieu, cette intelligence bloque en fait tout ça. Maintenant, c'est fini. Nous avons le nom, nous devons donc extraire le nom du film. Et nous allons créer le nom original de movie.where, le nom soulignement original de Movie.where. Et puis je vais le faire. Si le nom du film existe, alors nous devons obtenir le nom du film et des L, nous allons obtenir le titre original de Movie Dot. Nous devons donc obtenir le titre film si le nom du film n'existe pas, car le titre du film est identique au nom du film. Parfois, l'administrateur peut utiliser le titre pour enregistrer le film, ou il peut utiliser le nom, quelque chose comme ça. Et c'est pourquoi nous sommes atteints de cette maladie ici. Le terme suivant est donc d'obtenir l'image. L'image que je vais faire, les points du film, le chemin en toile de fond. Enfin, pour les généraux, nous allons faire des films, général. Diapositives à points. Donc, ce que nous voulons faire maintenant, c' est découper les généraux en tranches. Permettez-moi d'expliquer ce que je veux dire par là. Par exemple, vous savez tous qu' un film peut avoir plusieurs films généreux, oui. Donc, dans un film, cela peut appartenir à, disons, de l'action, vous savez, à des choses comme ça. Donc, si le film compte moins de dîners, supposons dix dîners, nous ne voulons aller chercher que trois dîners. Donc, si un film appartient à cinq ou six personnes généreuses, nous n'avons besoin que de trois personnes généreuses. Je vais donc faire Zero Slash Three. C'est aussi simple que A, B, C. Ensuite, nous devons vérifier si j'ai fait quelque chose de bien, d'accord, très bien. Lorsque nous exécutons l'application, nous voulons savoir s'il y a une erreur de valeur. Nous avons maintenant terminé de configurer la première condition. La deuxième condition est simple : dans la base de données de l'équipe, je peux vous assurer que nous avons des milliers de films là-bas. Mais maintenant, nous voulons récupérer uniquement les films. Oui, donc nous ne voulons pas que 90 films soient 100 et plus, nous avons besoin que de 80 films. Nous devons donc également en fixer les conditions. Ici, je vais faire const, obtenir des données vidéo, les configurer sur une fonction sinc. Et puis, dans la fonction, nous allons prendre une API, une virgule générale, une virgule, une pagination. Ensuite, nous allons définir la pagination sur false. Ne vous inquiétez pas, vous obtiendrez un G suffisamment clair. La dernière fois que j'ai utilisé le code ici, je vais créer tableau vidéo const, un tableau vidéo const, equa, le définir sur un tableau vide comme celui-ci. Donc, cette zone vidéo que nous avons transmise en tant que droits de paramètre dans le tableau des données vidéo. Maintenant tu l'obtiens. Nous allons donc parcourir les films en boucle pour ne récupérer que 80 films que je vais faire. Car disons que je suis égal à un. Le point-virgule se termine. Ensuite, longueur en points de la matrice vidéo. Donc, si la longueur de points de la matrice vidéo est inférieure à 80, et si I est inférieur à dix points-virgules nous allons incrémenter i, i plus, plus. La fonction sinc va renvoyer une promesse, alors nous devons l'attendre. Donc je vais faire une course de poids en utilisant Odd Gate. Alors, qu'allons-nous obtenir dans le dos, API et le signe du dollar ? Nous allons faire la page et, s'il vous plaît , faites attention ici pour ne pas avoir de problèmes. Et ensuite, s'ils existent, nous allons montrer ce qui est payé et nous n'allons rien montrer. Donc, ce que je vais faire, page, pour que si la page égale sort, heures ne montrent rien d'inquiétant. Je vais expliquer chaque ligne de code. Tapons simplement le code et le ROE du film. Ensuite, nous aurons leurs résultats. Karma, salle de cinéma. Plus calme, généreux. Une fois cela fait, nous allons renvoyer la gamme de films. Enfin, nous devons adapter le film. La condition est maintenant configurée. Regardons le film rapidement. Nous allons exporter cette fonction car nous devons l'envoyer sous forme de droits d'action sur la page Netflix. Donc je vais faire de la const, des films gras, de l'equa, créer un funk synchronisé. Hein ? Dans le cadre de cette fonction, nous allons intégrer Netflix. Et ici, nous allons suivre la tendance des barres obliques de Netflix , car nous voulons également aller chercher le film en train. Encore une fois, nous allons utiliser la fonction async, async et wait. Tu le sais déjà. Ici, nous allons aborder ce type. Nous voulons également récupérer les films par type. Cela pourrait être une série, un film de saison. Tu regardes un film ou tu veux terminer. Donc, tu sais, des types de films qui aident au coma. Et ici, nous allons prendre l'API trunk comme deuxième paramètre de cette fonction. Cela nous donnera donc accès aux États. Donc, en raison de notre fonction, je vais faire ici const Netflix Slice. Nous allons donc avoir accès à la tranche Netflix. Et à partir de là, nous allons obtenir les généraux, les définir sur myfunc, api dot gets, getState. Je vous ai dit que cela nous donnerait accès à l'État. Des États-Unis. Nous serons en mesure de récupérer les films. C'est aussi simple que cela. Ne vous inquiétez pas, je dois encore passer en revue l' explication pour que vous obteniez suffisamment de données essentielles. Ecua obtient des données sur les films, n'est-ce pas ? Nous sommes dans cette fonction de casser la balle en gros, ouvrant et en fermant les crochets bouclés. Nous devons maintenant suivre la tendance de la barre oblique des URL de base de TempDB , car nous voulons adapter le film par trains. Je te l'ai dit tout à l'heure. Slash Trending également. Si c'est tendance et qu'il faut se procurer le tube du film. S'il s'agit d'une série, s' il s'agit d'un film de saison. Et nous voulons également l'obtenir d' ici la semaine. OK, ici, nous devons attribuer notre API, API sur la clé Bosco, equa, ma clé API plus une virgule ici. Généreux. Et puis réglez cela sur vrai. Donc, si le taux général est faible, c'est vrai. Alors seulement, nous voulons aller chercher le film. Je ne sais pas ce qui ne va pas ici ailleurs. OK, voyons quelque chose. Ici, nous devons le fermer avec les parenthèses. Je pense que c'est juste l'air. OK, donc après les avoir fait, jetez un œil. Il s'agit d'une largeur A. Nous devons donc l' attribuer à une variable. Et je vais faire des données de const. Ensuite, nous allons obtenir notre résultat à partir des données, à nouveau, attribuant comme suit. Enregistrez l'application. Et voyons voir. Ça dit que la générosité ne se définit pas par, d'accord, les gars, jetez un œil. Ce type est censé être généreux et tu économises à nouveau, voyons ce que ça veut dire. Cela fonctionne parfaitement bien, mais nous n'avons encore rien sur la console. Revenez en arrière et passons à la page Netflix Within. OK, formatons le code. Faisons en sorte que l'indentation soit correcte. Hein ? Ensuite, nous allons avoir const, generous loaded equa, use Selector. Assurez-vous d'importer l'utilisation select all depuis React, redox sur hazy. Ils utilisent Selector est une fonction et écrivent pour exécuter cette fonction. Nous allons nous rendre aux États-Unis. Et je vais faire State Dot, Netflix, Dot, Generous Loaded. Nous allons donc en avoir des effets aux États-Unis. Nous devons expédier l'action directement aux États-Unis. Je viens de dupliquer ce type ici. N'aie pas peur, n'est-ce pas ? À l'intérieur de. Ce que je vais faire, c'est faire de vrais moments et y mettre fin. Maintenant. Donc, ils s'en tiennent à aller chercher des films, c'est quand la dégénérescence est à son comble. Nous allons donc le conditionner ici. Si les dîners sont chargés, nous voulons utiliser la méthode Fetch Movie comme celle-ci et nous assurer de l'importer par le haut. Voici comment récupérer des films en magasin, non ? Ne serait-ce pas la méthode de récupération de films, nous allons perturber tous les types de films que nous voulons récupérer tous les types de films. Euh, hein. Très bien, une fois cela fait, nous voulons qu' ils s'activent lorsque le composant s'affiche. Donc, ce que je vais faire, c'est prendre le tableau de dépendances car il ne dépend de rien pour le moment pour démarrer , enregistrer l'application. Ensuite, nous devons revenir aux plaisanteries de l'indice. Faites défiler la page vers le bas jusqu'à la méthode Fetch Movies. Et ici, nous devons mettre une barre oblique comme celle-ci. Cela fait, nous devons également le terminer par un point-virgule ici. Et puis ici, je vais faire console.log. Que voulons-nous regarder ? Nous voulons enregistrer les données ici. Je vais donc faire des données, sauf l'abrogation. Voyons s'il y a encore quelque chose qui ne va pas, c'est bon. Retournez au navigateur et voici la promesse de dépenser. Maintenant, ouvrez cette promesse et voyez le résultat ici. Vous voyez que nous avons maintenant 80 films, n'est-ce pas ? Porter cet IRI, c'est aussi beau. Je l'aime bien. Nous avons donc fait quelque chose de grand ici. Permettez-moi maintenant d'expliquer les détails. OK, voici les générateurs de films, qui sont Drama, oui, l'identifiant du film. C'est tout ici avec la largeur de l'image, dans ce cas, le chemin de fond. Voici le chemin en toile de fond. Et c'est le titre du film, The Last of Us. C'est donc ce que c'est. Ouvrons la générosité, vous vous rendrez compte que le dîner ici en est un. Oui. Vous aurez donc quelques films avec plus d'un généreux, voyons voir, ce type ici. Il en a trois généreuses. Il appartient à la science-fiction, à l'aventure et à l'action. est donc ce que nous avons fait lorsque nous avons conditionné le nombre de dîners à aller chercher. Ce type s'est montré très généreux et ainsi de suite. Encore une fois, passons en revue le code pour que vous le compreniez suffisamment bien. Nous sommes donc là pour manger les généraux. Et sur cette ligne, nous essayons de définir pour chaque généreux sa carte d'identité. Chaque fois que nous aurons un dîner avec une carte d'identité, nous devrons en extraire le nom et l'intégrer à la gamme généreuse du film. C'est Lee que nous avons fait ici. Et ici, à la deuxième condition, nous avons vérifié si le film avait une toile de fond. Dans ce cas, laissez-moi vous montrer. C'est le chemin en toile de fond. Si le film a une toile de fond et que ce film nous intéresse. Rien que ça, c'est le genre de films qu'une femme phagique. Nous allons donc obtenir la carte d'identité du film, qui se trouve ici. Le nom ou le titre du film, qui est ce gars ici. Et aussi l'image qui est la toile de fond ici. C'est ça. Après avoir fait tout cela, nous devons ensuite séparer les plus généreux, car nous ne voulons pas mettre plus de trois généraux dans un film. Donc, quand j'économiserai, d'accord, laissez-moi vous montrer, supposons que nous ne voulons pas en mettre plus de deux. Lorsque j'enregistre l'application, revenez au navigateur directement dans la console. Ouvrons le généreux pour que vous puissiez voir ce que je veux dire par là. Maintenant, ce film n' a qu'un seul genre. Et nous avons ici deux généraux. Vous voyez maintenant que nous sommes limités, le nombre de genres doit être de deux. Vous pouvez donc décider d'en acheter plus de deux généreuses pour un seul film. C'est donc ce que nous avons fait ici. Et bien sûr, nous avons commencé par trois variables. Nous avons la variable ID, nom, image et général. Ainsi, l'idée stockera l'identifiant, le nom du film sera enregistré sur le nom. Le chemin de la toile de fond du film sera enregistré sur l'image, et ainsi de suite. Donc, ici, ce que nous faisons est simple. Nous avons dit : écoutez, nous ne voulons pas aller chercher un film dont la taille est supérieure à 80. Et comme vous pouvez le voir sur ce tableau, laissez-moi vous le montrer. En bas, vous verrez que la longueur de ce tableau est de 80. Voyons si nous pouvons zoomer un peu. D'accord, voyez-vous, nous ne voulons pas récupérer de films dont la taille est supérieure à 80. Oui, c'est donc ce que nous avons fait ici. Enfin, nous avons consulté le film en fonction de la tendance, de la semaine de la tendance et du type de film. C'est donc aussi simple que cela. Après avoir fait cela lors de la prochaine conférence, nous allons procéder à l'affichage des films, n'est-ce pas ? Nous sommes dans l'interface utilisateur, et bien sûr, ça va être extrêmement génial. J'espère que vous avez apprécié cette conférence et n'hésitez pas à poser des questions si vous êtes confus. Je comprends que cette conférence en particulier soit assez délicate, mais si vous y prêtez suffisamment attention, vous obtiendrez certainement les G. Rendez-vous lors de la prochaine conférence. 96. 94 États mondiaux: Très bien, lors de la conférence précédente, nous avons réussi à récupérer les données du film. Maintenant, ce que nous allons faire, c'est le placer sur scène mondiale afin que les composants de l'empire puissent communiquer avec ces données. Revenez au code VS. Et la première chose que nous allons faire, c'est d'utiliser la fonction Fetch Movies. Tout d'abord, nous devons supprimer le journal de la console. Et puis là, je vais revenir, obtenir données sur les films, c'est aussi simple que cela. Une fois cela fait, nous devons l'ajouter à cette souillure. Viens ici, surligner les longueurs 66 à 69 dupliquées. Nous devons donc nous débarrasser des personnes généreuses. Ensuite, nous allons appeler la fonction Fetch Movies. Si la fonction des films de la Fed est remplie, nous pouvons alors la récupérer auprès de l'État comme ceci. Nous allons donc faire des points d'État à partir de l'État. Nous allons avoir les films, puis l'action principale et la charge utile. Une fois cela fait, nous pourrons communiquer avec les données du film n'importe où dans l' application, car ont été ajoutées à l'état. Retournez à Netflix point js. Et puis ici, je vais faire le sélecteur Movies equa you. Ils utilisent donc ceux-ci nous donner accès aux états. Et bien sûr, c'est une fonction, non ? Nous sommes en fonction. Nous allons prendre les États-Unis. Alors ici, nous allons faire des films State Dot, Netflix Dot, aussi simple que cela. Et maintenant, nous sommes en mesure de communiquer quelles sont les données. Laisse-moi te montrer. Viens ici. Effacons tous ces journaux de console. Ici. Je vais faire console.log. Enregistrons les films pour que vous puissiez les voir. Enregistrez l'application dans le navigateur. Celle de papa. Vous voyez maintenant que nous avons une boucle infinie de données. Vous voyez ? Essayons de l'ouvrir. Vous voyez, c' est exactement ce que sont les portes redox. Donc, si quelque chose est ajouté à cette date ici, nous ne pourrons pas l'obtenir partout dans l'application. Comme vous pouvez le voir ici. Nous avons maintenant rendu les données des films disponibles pour la consommation. Dans la prochaine conférence, nous commencerons à consommer les données. Rendez-vous lors de la prochaine conférence. 97. 95 Arrête boucle infinie: Très bien, donc avant de passer à la prochaine conférence, nous devons faire quelques réglages ici. Ainsi, lorsque vous observerez la console, vous vous rendrez compte que nous avons une boucle infinie ici. D'accord ? C'est donc à cela que nous devons mettre fin. Pouvez-vous voir les données, savoir que les films sont enregistrés sur la console à l'infini. Oui. Donc, ce que nous allons faire maintenant, retourner à la page Netflix, juste aux lignes 36. Je vais juste faire un commentaire à ce sujet. Safe, sur le navigateur, chez papa, puis actualisez. La boucle infinie va donc ralentir votre ordinateur portable. C'est la raison pour laquelle j'ai placé les commentaires sur le journal de la console ici. Maintenant, votre machine peut être un peu plus rapide qu' avant, car la boucle infinie ralentissait tout. Bien, passons à la prochaine conférence où nous allons commencer à afficher les données directement à l'écran. On se voit alors. 98. 96 films sur l'écran: Bon retour à tous. Dans la conférence précédente, nous avons réussi à récupérer les films depuis l'API CMDB, puis nous avons verrouillé les films sur la console. Dans cette conférence, nous allons donc afficher les films à l'écran afin que les utilisateurs finaux puissent interagir avec les films, soit en cliquant sur les films à regarder, soit ajoutant les films qu'ils aiment payants. Alors, sans plus tarder, allons-y. Créez rapidement un nouveau composant appelé slider container, n'est-ce pas ? Quels sont les composants ? Clic droit. Nouveau fichier. Le conteneur plus plat point g en est un autre. Et aussi, d'accord, pour apporter les composants que nous allons créer. point g du curseur vidéo correspond à la commande B. Pour fermer l'explorateur. Ensuite, je dois supprimer l'index des constantes, le fermer, le fermer. Désolé, ne supprimez pas. Nous devons fermer certaines pages. sommes maintenant prêts à apporter le conteneur coulissant, chaque FCE pour générer notre composant fonctionnel et la même chose ici. Hein ? OK, alors ouvrez Netflix Cheers. Juste ici. Nous allons effectuer le rendu du conteneur de curseurs. Faites défiler la carte exactement à l'endroit où nous l' avons trouvée, nous allons l'effacer. Ensuite, je vais créer un conteneur de slider ici. Il s' assure de l'importer en haut de la page. cela fait, une autre chose que nous devons faire à nouveau est de passer les sondes vidéo dans le conteneur coulissant. Je vais donc faire ici des films, des films. Revenons donc au conteneur coulissant et recevons ces sondes. Conteneur Slater. Alors, il s'agit de déstructurer les films. les avoir fait venir ici, nous devons importer des composants stylisés, les composants de départ ci-dessous. Nous devons également importer le slider vidéo à partir du slider vidéo. Donc, en gros, nous allons sélectionner les films que nous voulons afficher d'affilée. OK, donc d'affilée, nous voulons afficher dix films. Rappelez-vous donc que nous récupérons plus de 80 films. Oui, donc dans chaque rangée, nous voulons afficher dix films. Pour ce faire, nous allons utiliser la méthode des slides. Oui, il serait donc possible sélectionner du début à la fin, par exemple, nous allons le vendre 0-10, 10-20 , 20-30, et ainsi de suite. Nous allons avoir une méthode appelée get movies between. Nous allons donc placer les films entre une certaine fourchette. Laisse-moi te montrer. Cette méthode va donc prendre le début et la fin comme paramètre, puis la définir sur une fonction d'erreur. Enfin, nous allons retourner des films, à ce type que nous avons présenté comme accessoires, des films, des points, des diapositives. D'accord ? Donc, ce qui se passe en ce moment, c'est que nous allons nous lancer dans ces films où nous avons tous les films, plus de 80 films. Oui. Nous allons donc regarder ces films et les découper comme nous le voulons. Laisse-moi te montrer. Nous voulons donc le sélectionner à partir des statistiques, virgules et, ici, vous pouvez également le faire depuis et remorquer des bateaux. Je veux que ça reste comme ça ou que je commence et que je finisse. Une fois cela fait, implémentons-le dans l' interface utilisateur afin que vous le compreniez assez bien. Nous n'avons pas besoin de ce DVD ici. Tout ce dont nous avons besoin ici, c'est d'une barre coulissante. Nous devons en faire une classe en la convertissant en composants de départ. Const Slider Wrapper, égal à stout, points, div, puis prendre la banquette arrière. Ne serait-ce pas sur le siège arrière que nous commencerons à appliquer ces serviettes. OK. Alors, c'est vrai, ne serait-ce pas le slider wrapper, nous allons faire le rendu du slider vidéo. Déplacez le curseur comme ceci, puis fermez-le à l'aide de la balise à fermeture automatique. Donc, ici, nous allons transmettre les données sous forme de sondes dans le slider vidéo. Je vais donc faire Data Equa, ouvrir et fermer les crochets. Nous allons appeler la méthode Get Movies Between. Nous voulons donc avoir des films. 0-10. Oui. Et à l'extérieur, je ne vais faire que le titre, uniquement sur Netflix. Donc, ce que je vais faire, c'est mettre en avant ce type et le dupliquer six fois. Maintenant, nous sommes déjà en train de découper les films. Maintenant, nous avons découpé le film et sur 80 films, nous obtenons 0 à 10, juste pour imprimer la première rangée et la deuxième rangée, nous obtenons 10-2020 à 30, 30-4040 à 50 ici. 50 à 60. 60 à 70. L'essentiel. C'est tout. OK. Oui, nous avons récupéré jusqu'à 80 films. Alors là, je vais en faire 70 à 80, tout est cool. Ensuite, nous devons modifier le titre. Ils apparaîtront donc en haut de chaque ligne pour donner un nom descriptif à ce rôle. Par exemple, ici, je vais faire des tendances dans les films d'action , les films romantiques, etc. Vous comprenez donc très bien tous ces hauts. Tu dois le faire de ton côté. Ici, je vais faire de nouvelles versions. Nouvelles sorties populaires sur Netflix. Je pense que nous devons organiser les choses de manière ordonnée. Je vais appeler ce gars directement dans l'action, je vais coller les points saillants de l'action, le couper, puis le coller ici pour les nouvelles versions. OK, laissons les choses comme si c'était bon. Cela fait, passons aux curseurs vidéo, où nous allons cartographier les films et les afficher sur le curseur vidéo de l'écran. Donc, ce que nous allons faire maintenant, c'est d'abord déstructurer les données et les titres. Permettez-moi de vous montrer ce titre ici et ces données. Nous les avons donc simplement déstructurés. Nous les transmettons au slider vidéo sous forme de sondes. Maintenant, nous devons revenir aux sliders vidéo, puis recevoir ces accessoires par-dessus le slider vidéo. Et puis avec les données structurées et le titre, n'est-ce pas ? Ce div ne serait-il pas ? Nous allons donner à ce div un nom de classe de slider, n'est-ce pas ? Dans la division, nous allons cartographier les films. Maintenant, je vais m'occuper des données, savoir ce type qui provient du conteneur Slider. Et vous savez que ce type se voit attribuer les films entre la méthode et que la méthode « Obtenir des films entre les deux consiste à renvoyer les films. Oui. OK. Je sais que tu comprends tous ces onglets. Movie Slider, puis je vais faire une carte à points de données. Nous allons utiliser l'index des virgules des films. Juste ici. Je vais revenir, nous allons renvoyer l'interface utilisateur. Mais dans ce cas, nous devons indiquer la société émettrice de la carte, car nous voulons cartographier les cartes. Donc, ce que je vais faire, c'est couper comme ça. Et assurez-vous de l'importer dans une baignoire. Données vidéo égales, attribuons-lui un film. L'indice est égal à l'indice. Bien sûr, nous devons préciser que la clé sera Movie Dot ID, plus près avec la balise à fermeture automatique. Lorsque vous enregistrez et que vous le transférez dans le navigateur, l'idée est la suivante pouvez-vous le voir maintenant, se peut que cela ne s'affiche pas dynamiquement simplement parce que nous ne l'avons pas encore fait. Mais pour l'instant, pouvez-vous voir que nous avons réussi à cartographier les cartes. OK, affichons les détails correspondants. Revenez au code VS , puis ouvrez la carte. G c'est nous dans la voiture, J, nous devons déstructurer les données du film. Laisse-moi te montrer le film. Le tau ici provient du slider du film. Ensuite, nous attribuons le film, les données du film. Je sais que tu comprends tout ça. Revenez donc à la carte. G n'a pas déstructuré les données du film. Nous devons les afficher de manière dynamique. Donc, ici, nous devons supprimer tout ce qui se passe comme ça. La source de cette image va donc provenir de la CMDB. Spécifiez l'Arctique. Je vais faire une barre oblique HTTPS image.cmdb.org slash d slash p slash w 500. Ensuite, nous allons avoir le signe 1$, puis ouvrir et fermer le crochet bouclé. Et ici, nous allons créer une image par points de Movie Data. Quand tu auras sept ans, ouvre le navigateur, les IDE. Pouvez-vous voir maintenant que nous avons réussi à afficher les films de manière dynamique. J'adore ça. C'est intéressant. Tu vois notre droite. Mais si vous passez la souris sur les films, vous verrez les données statiques . Pouvez-vous voir, comme le rouge, remarquer l'action et tout ça ? Appelons-les donc de manière dynamique. Retournez aux composants de la carte et passez la souris dessus, surlignez et copiez. Viens ici. Nous voulons également afficher l'image de l'affiche correspondante, l' effacer et la coller ici. Pour la vidéo, nous allons la diffuser en direct car nous n'avons pas accès à la vidéo de la CMDB, nous n'avons donc qu'à quitter la vidéo maintenant. Que devons-nous encore faire ? Nous devons afficher le titre. Donc, pour afficher le titre, nous devons l'effacer , puis prendre les crochets pour nous permettre d' écrire du JavaScript entre les GSA. Donc, ce que je vais faire maintenant, c'est le nom du point des données du film. Revenons à l'endroit où se trouve le film Generous. Par ici. Nous allons maintenant cartographier cette difficulté. Donc, ce que je vais faire, c'est effacer la balise LI pour moment, puis ouvrir et fermer les crochets, les données du film, les points, les points mob. Nous sommes donc en train de cartographier les généreux en ce moment. Donc, en général, je vais le régler en fonction de notre fonction, n'est-ce pas ? Nous sommes dans la fonction, nous allons à nouveau avoir le tag LI, n'est-ce pas ? Nous sommes dans le LI tag. Nous devons présenter le film de manière généreuse, et je vais faire des généralités, aussi simple que cela. Sauvegardons et voyons dans le navigateur. Dans n'importe quel film. Vous voyez que ce film est Babylon. Lorsque vous passez la souris dessus, c'est Avatar, la voie de l'eau. C'est bon. Tu peux voir la semaine dernière ? Certains films n'ont qu'un seul titre et certains films également. Il a plus d'un titre. Alors oui. Donc, lorsque vous passez la souris sur ce film, Black Panther, Wakanda pour toujours. Les choses commencent donc à prendre forme. Au dessus d'Andy, il y a une roue à aubes remplie d'eau. Le dernier souhait. Et tout ça fonctionne parfaitement comme prévu. Et c'est sûr que j' adore leur hôtel. Dans la prochaine conférence, nous allons donc styliser le composant du curseur et tout aligner correctement. C'est tout pour le moment. Rendez-vous à la prochaine conférence. Restez concentré et prenez toujours soin de vous. 99. Composante de film à 97: Bon retour à tous. Dans la conférence précédente, nous avons affiché les films à l'écran. Tu peux voir ? Je comprends donc que ce composant n'est pas beau, mais il n'a pas l' air moche non plus. Donc, dans cette conférence, nous allons procéder à la stylisation ce composant et lui donner un aspect extrêmement beau. Passez au code VS. Et allons-y. Juste au moment où le film glisse. Tout d'abord, nous allons partir de zéro pour les entreprises. Et puis ci-dessous, nous allons faire const container equa, point de départ d. Donc, créons rapidement ce type ligne supérieure pour le surligner à partir des voies 122, des lignes 18, des prises. Dans le format conteneur, le code est plus joli. Cela fait, nous allons avoir une autre division, n'est-ce pas ? Pour apporter le conteneur div avec le nom de classe wrapper. Et encore une fois des extraits des lignes 112, des lignes 15, des découpes, collés ici. Formatez également le code avec pretty. Juste après le contenant, nous allons avoir un porte-étiquette. Et ici, nous allons prendre le titre, qui est ce type qui serait déstructuré et qui provient du conteneur Slider. C'est ici. Maintenant, ce faisant, nous aurons la seule tendance actuelle sur Netflix, populaire sur Netflix et les autres. Nous allons donc les afficher en haut de chaque rôle pour donner à ce rôle un nom descriptif, pour décrire les anciens combattants, pour ainsi dire. Donc, après avoir fait cela ici, nous allons donner au conteneur un espace de 0,7 rem. OK, c'est bon comme ça. Nous allons l'avoir en position. C'est vraiment un Tea Party. Cela fait, stylisons rapidement la balise cachée. Il avait gagné. Donnons-lui une marge. La marge gauche est de 50 pixels. La taille de police est de 25 pixels. La famille de polices, je vais la choisir ici. Vous pouvez décider de lui attribuer n'importe quelle famille de polices de votre choix. Et c'est votre propre spécification ou prescription, pour ainsi dire, continuons. Juste après l'étiquette. Nous allons cibler l'emballage. Laisse-moi voir. Voici l'emballage. Le wrapper, nous allons cibler le slider puis le styliser. Curseur foncé. Nous allons donc l' avoir Display Flex. Et cela alignera l'ensemble des éléments de chaque ligne sur le navigateur. Tu peux voir ? Très bien, donc je pense que le rembourrage est trop important. Nous devons donc faire défiler la page vers le haut. Faisons en sorte qu'il fasse partie d'une sauvegarde complète. Très bien, c'est bien. Pensez aussi que c'est trop, mais d'accord, continuons. Nous allons certainement arranger les choses. Nous allons donc le donner ici. Laisse-moi te montrer quelque chose. Lorsque vous observez l'écran, vous vous rendrez compte que les cartes ne prennent plus la largeur appropriée que nous leur avons attribuée. Oui. Donc, ce que nous allons faire en ce moment c'est que le contenu sera maximal. Lorsque vous enregistrez sur le navigateur, vous voyez maintenant que tout est cool. Très bien, donc si vous observez également l'écran, vous verrez le fond rouge sur la carte. C'est ce que nous ne voulons absolument pas. Je l'ai utilisé dans la conférence précédente à des fins pédagogiques. C'est juste, par exemple, du saké. Revenez en arrière, ouvrez la carte. Du jazz. Bien, dans la carte, il suffit de surligner la couleur de fond. OK, essuyez-le. Sûr sur le navigateur. Celle de papa. Bien. Bonjour, c'est vrai. Elle prend progressivement forme. Revenez en arrière. Maintenant, ouvrons le slider vidéo. Donnons-lui un espace pour qu'il y ait l'espace entre chaque carte. L'écart sera de 0,6 RAM. Transformez, traduisez X pixels nuls. Donc, lorsque vous faites cela, voici le résultat. Tu peux voir ? Nous allons donc faire la transition de 1 s. Faciliter l'entrée et la sortie, marge à gauche. Faisons 50 pixels. Cela fait, en toute sécurité, voyez ce que nous avons maintenant. Bien. Vous voyez les gars, ça a vraiment l'air sympa. Maintenant, pour la marge sur l'axe gauche, je ne pense pas qu'il soit nécessaire la marge gauche soit de 50 pixels. Nous pouvons donc en fait faire cinq pixels. Voyons voir. C'est bon, bien. fois cela fait, laissez-moi vous montrer tout en haut nous avons la balise « head one qui est utilisée pour afficher le titre. Mais à l'écran, vous ne le verrez pas simplement parce que la police est noire. Tu peux voir ? Maintenant, quand je mets tout en évidence, cela devient réalisable. Donc, ce que je vais faire maintenant, c'est spécifier la couleur de la police. Couleur. Faisons en sorte qu'il soit blanc. Ça ira. Et ce sont ceux-là. Tu peux voir ? D'accord, précisons également la marge gauche de la police. Faisons donc cinq pixels. Quelle est la marge gauche de la balise Hadrien utilisée pour afficher le titre. Ils ont raison, les gars. Tout a l'air extrêmement soigné. C'est tellement propre et j'adore ça. Tu peux voir ? Très bien, la prochaine étape consiste à implémenter le curseur. Hein ? Je pense que nous devrions le faire lors de la prochaine conférence. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentré. Les analystes prennent soin de vous. 100. 98 optimisation de performance: En coulisses, je me suis rendu compte que les performances de l'application étaient un peu affectées. Permettez-moi de vous le signaler. Lorsque je fais défiler l'application, vous vous rendrez compte que la navigation supérieure met du temps à changer sa couleur de fond en noir lorsque l'application dépasse zéro sur les axes y. Maintenant, jetez un œil. Cela prend également du temps. Vous vous rendrez également compte que l'application ralentit. Vous allez voir, je ne sais pas si vous pouvez en prendre note de votre côté. Vous voyez que l' application est assez lente. Avant de procéder à l' implémentation de ce curseur, nous devons donc optimiser les performances. Et cela se fera avec React point Mammal. Nous devons donc trouver un moyen de commémorer l'application. Ainsi, un mémo React Dot est un autre composant élevé qui accepte un autre composant et fonctionne comme un argument, passe au code VS à moins qu'il ne soit implémenté rapidement VS Code. Revenons maintenant au film Slider. D'abord. Ce que je vais faire ici, c'est encapsuler le code dans le mémo React Dot. Je vais maintenant supprimer la fonction d'erreur, supprimer l' opérateur d'affectation, puis faire défiler la page vers le bas. Nous devons également supprimer cette exportation. Je n'ai pas supprimé tous les arrêts, donc nous devons supprimer ce type. Et je vais exporter les valeurs par défaut, React Dot, Mammal, parenthèses ouvertes et fermées. Et nous allons participer à une réception. Et juste à l'intérieur, nous devons également prendre en compte le deuxième argument, qui est le composant. Surlignez tout ce qui se trouve ici, coupez-le, venez ici et collez. D'accord, nous devons le rapprocher de plus en plus. Cela fait, surlignez les parenthèses fermantes de React point mammal. Arrête ça. Nous devons donc le fermer ici, directement sur la ligne 18. Vous voyez que l'erreur a disparu ? Maintenant, ce composant particulier est optimisé. Optimisons également les composants de la carte. Bien sûr, tu sais quoi faire. Effacez la fonction flèche, l'opérateur d'affectation. Ici, je vais exporter la fonction par défaut, le mémo React Dot, en prenant les parenthèses, puis nous allons saisir la fonction surligner comme celle-ci, la couper, l'accompagner. Et le collage a également mis en évidence les parenthèses fermantes du mémoire React Dot. Arrête ça. Nous devons le fermer ici. Laisse-moi te montrer ici comme ça. Cela fait, l'application se plaint toujours. Faites défiler vers le bas. Nous devons supprimer ces exportations. Tu peux voir l'application ? Encore une fois ? Vérifions-le sur le navigateur. Faisons donc défiler la page vers le bas. Pouvez-vous voir maintenant que tout fonctionne parfaitement ? Jette un coup d'œil. Bonjour, c'est vrai, les gars. Tout cela est donc une question d'optimisation. Dans la prochaine conférence, nous passerons au curseur de la carte. Rendez-vous lors de la prochaine conférence. 101. 99 contrôle slider: Bon retour à tous. Dans cette conférence, nous allons implémenter les icônes de contrôle du curseur afin que les utilisateurs puissent faire glisser les films vers la gauche ou vers la droite. Alors, sans plus tarder, commençons VS Code. La première chose que nous allons faire ici est d'importer les icônes depuis le défilement des icônes de React vers le haut. Et ici, je vais m' occuper des importations. Nous devons importer le contour à gauche, l'UTLA se déplace en pots. J'ai tracé le contour de la virgule gauche, n'est-ce pas ? Maintenant, tout cela provient des icônes React. Nous devons donc le résoudre, le réparer avec un colorant, comme ceux-ci. Magnifique. Une fois cela fait, la ligne suivante consiste à afficher les icônes, non, ce ne serait pas vous. Donc, juste après le div avec le nom de classe wrapper, nous allons avoir un autre div. Donnons-lui un nom de classe. Nous allons donc également ouvrir, ouvrir et fermer les crochets. Nous allons prendre le thé à l'écorce. Le nom du cluster sera donc Slider Dash. Et je vais les appeler « gauche » pour qu' ils indiquent « gauche ». Oui. C'est ça. OK. Une fois cela fait, nous devons fermer le D. OK, c'est vrai, le div avec le nom de classe du slider Action ne serait-il pas à gauche Nous allons afficher la couche de contour de plus près à l' aide de la balise à fermeture automatique. La ligne suivante consiste donc à surligner cette définition, le div du nom de classe de l'action du curseur, surligné à partir des lignes 152, des lignes 17. copie vient juste après le div avec le nom de classe du slider. Voici le div de fermeture du slider ClassName, puis collez-le ici. Nous allons donc le remplacer une valeur aberrante ici même. Je vais le changer à droite. Bien. Une fois cela fait, stylisons-le rapidement dans le composant de style. OK, sortons-le. Pour l'instant. Le curseur se trouve juste à l' intérieur de l'emballage. Donc, ce que je vais faire maintenant, c'est faire défiler la page vers le bas. Voici l'emballage. Il y a un slider, non ? Nous sommes dans la course. Permettez-moi de vous montrer cette diapositive ici. Nous voulons donc styliser l'action du curseur. Donc, après les derniers crochets du slider ClassName, nous allons styliser le slider Dutch Auction. Nous allons avoir un écran flexible. Justifiez le contenu pour qu'il soit centré, alignez les éléments en position centrale. Nous allons le positionner de manière absolue car nous voulons que les icônes se trouvent en haut du curseur. Nous allons donc l' avoir absolu. Et souvenez-vous qu'ici, la position était définie sur la position était définie relative ou elle est réglée sur relative, pour ainsi dire, bonjour, n'est-ce pas ? Et d'ailleurs, nous ne sommes pas en cours d'anglais ici. J'en suis désolée. Donc, l'indice Z, l'indice tiret z faisons 99. La hauteur, 100 %. Le top. Le haut va se situer vers le bas. Ça va être zéro. La largeur. Faisons 50 pixels. La transaction, nous allons l' avoir dans une seconde, est terminée. Ou vous pouvez entrer et sortir facilement ce que vous voulez. Nous devons donc styliser le SVG. Svg, nous allons utiliser VG, la taille de police. Faisons en sorte que deux soient aléatoires. Causal. Faisons-en un pointeur. Donnons-lui une couleur. Faisons en sorte qu'il soit blanc. C'est bien. Enregistrez et voyons ce que nous avons sur le navigateur. Alors les gars, voici les icônes ici. Très bien les gars, les icônes apparaissent donc ici. Laissez-moi vous montrer, pouvez-vous voir que nous en avons deux à gauche et à droite, alignez-les correctement. Maintenant, ce que je vais faire, c'est défiler vers le haut. Permettez-moi de vous montrer ce gars qui indique également le droit. Ce type qui indique la gauche. Nous devons le styliser avec soin. Alors viens ici. Je vais faire à gauche. De gauche à droite, nous voulions zéro. De droite à droite, nous voulons le ramener à zéro. Voyons le résultat de cette mise en œuvre dès maintenant. Bien. Tout semble bien. Et maintenant, vous pouvez voir la flèche ou la gauche. Et vous pouvez voir la flèche sur la droite. C'est ce à quoi nous nous attendions. Bien, après avoir fait tout cela, je voudrais vous expliquer quelque chose. L'idée est donc la suivante nous ne voulons pas que les flèches apparaissent en haut des cartes par défaut, comme celles-ci. Oui, nous voulons donc que les flèches n' apparaissent que lorsque nous passons la souris sur le curseur. Donc, si la souris n'est pas sur le curseur, vous ne verrez pas les flèches. Mettons-nous rapidement en œuvre. Viens ici, fais défiler la page vers le haut. Nous allons déclarer les variables d'état nécessaires à utiliser. Et avant de le faire, nous devons importer le crochet américain et un terme. Et ici, je vais générer les extraits d'utilisation. Je vais donc faire vos états. Et voici les extraits. Nous allons donc d' abord contrôler la visibilité. Ensuite, nous allons définir la visibilité du contrôle sur false. Donc, l'état initial va être faux Vous devez créer le C pour qu'il soit sur Carb, régler le contrôle de la visibilité et l'état initial sera faux. Maintenant, lorsque l'utilisateur passe la souris sur la carte, nous voulons que les flèches apparaissent. La façon dont nous procédons est la suivante : allons-y. Nous sommes dans le conteneur. Nous allons avoir une constante ici. Je vais faire Control Visibility, Aquatic. Contrôlez la visibilité. Et si c'est juste en dessous, nous devons implémenter la commande on mouse enter n. Notre souris part. Donc, parmi n, nous allons appeler la fonction de configuration pour mettre à jour l'état initial. Définissez la visibilité des commandes. Et nous allons le rendre vrai. La plupart des feuilles. Nous allons définir la visibilité du contrôle sur false, cela va de soi. Maintenant que c'est fait, implémentons la condition maintenant, n'est-ce pas ? Le div avec le nom de classe de l'action du curseur ne serait-il pas laissé. Nous devons poser une condition ici. Maintenant, je vais m'occuper de la visibilité, sinon de la contrôler. Faisons-le comme ça. Et un L, nous allons également afficher une chaîne vide. La même chose s'applique ici. Si ce n'est pas le cas, c' est-à-dire si la visibilité du contrôle n'existe pas, nous n'en ferons aucune. Et maintenant on ne va rien faire. Donc, l'idée derrière tout ça est de styliser ce neurone ici. D'accord ? Donc, quand on va ici, aucun point. Ensuite, nous n'en aurons aucun avec écran. Cela masquera donc les icônes de contrôle. Et quand vous devez l'utiliser, placez votre souris sur la carte. Cela va être visible. Lorsque vous enregistrez et consultez ce navigateur. Tu peux voir ? Laisse-moi te montrer. Je retire la souris de la carte. Maintenant, lorsque je passe la souris sur la carte, vous allez voir les icônes. Tu peux voir ? Passer la souris au-dessus de la bouche ? Et tout fonctionne parfaitement comme prévu. À l'heure actuelle, lorsque vous cliquez sur l'icône, rien ne se passe. Tu vois, laisse-moi te montrer. Lorsque vous cliquez sur l' icône, rien ne se passe. Pourquoi c'est simplement parce que nous n' avons pas implémenté ce slider. Passons donc à la prochaine conférence où nous allons implémenter le slider. Rendez-vous lors de la prochaine conférence. Concentrez-vous sur les soins holistiques. 102. 100 Mettre en œuvre le curseur: Dans cette conférence, nous allons implémenter le slider. Ainsi, à la fin de cette conférence, nous ne pourrons pas déplacer les cartes vers la gauche ou vers la droite de l'écran. Et vous allez certainement adorer les hôtels Angel. Allons-y rapidement. La première chose que nous allons faire ici est déclarer une variable d'état inutile. Faites défiler l'écran vers le haut. Nous avons importé le crochet américain de la conférence précédente. Et ici, nous allons importer l'utilisateur if hook. Et initialisons-le rapidement ici. Liste Ref, equa. Utilisez une côte. Ceci étant fait, passons rapidement à la variable d'état de nébulosité S3. Et ici, nous allons générer les extraits de la phase d'utilisation. Je vais l'appeler position coulissante vers le haut. Nous allons définir la position du curseur. Oui, ce sera sur CUP. Ensuite, l'état initial du curseur sera nul. Ici, nous allons avoir une constante. Comment la direction est-elle devenue égale à notre fonction ? Et puis ici, nous allons prendre la direction comme paramètre. Nous allons donc le faire cette fois. Distons la distance entre un quadrilatère , un point de référence, un point actuel. Donc, ce que nous allons faire maintenant, c'est obtenir la position réelle du chariot sur l' axe X par rapport à la fenêtre d'affichage. Et le moyen d'y parvenir est d'utiliser la méthode du ghetto liant les clients. Get obtient des demandes de cautionnement pour des œufs. Bien sûr, c'est une méthode. Nous obtenons la position sur l'axe X et je vais faire -17. Donc, si maintenant nous allons avoir une maladie. Si la direction est égale à gauche, si la direction est centrale à gauche, position du curseur est supérieure à zéro. C'est la seule fois où nous pourrons déplacer la carte. Cela signifie simplement que lorsque vous cliquez sur l'icône de gauche, laissez-moi vous montrer ici. Donc, cette icône de gauche se trouve ici, lorsque vous cliquez dessus, également, si la direction sur l'axe X est supérieure à zéro. Donc, ce que je vais faire maintenant, c'est lister les points de référence. Nous devons obtenir la position actuelle, ce courant, puis nous devons la styliser par transformation par points. Nous voulons donc l' animer vers la gauche. Et puis ici, nous allons lui appliquer du style. Nous allons traduire le signe du dollar X. Nous allons donc déplacer ce curseur 230 pixels vers la gauche, la mémoire. Lorsque nous aurons fini de taper le code, je l'expliquerai simplement pour que tout le monde le comprenne suffisamment bien. Je vais faire une différence de distance, puis appliquer les pixels ici. Cela fait, nous devons régler la position sur la position coulissante vers le haut plus une. C'est le plus simple, les papas ont raison. Donc, c'est pour le côté gauche. Nous devons également l' implémenter pour le côté droit. Je dois juste copier un extrait de la déclaration if. Surligner les lignes cystéine à 19. Copie. Viens ici, colle. Changez-les à droite. Qu'est-ce qui fonctionne encore une fois ? Maintenant, si la position du curseur est inférieure à quatre, ne pouvons-nous déplacer les cartes que 210 pixels négatifs vers la droite ? C'est aussi simple que cela. Et ça, ça devrait être moins un, et ça devrait être plus un. Sauvegardons l'application. Voyons maintenant comment nous pouvons implémenter cela des deux côtés. Très bien, quels sont les div du nom de classe du slider ? Je vais le faire. Et ce sera une liste de réf. Implémentons-le ensuite sur l'icône. Ici, nous allons spécifier le bouton onclick, onclick de l'icône de gauche. Nous devons déplacer ce curseur vers la gauche. Donc, ce que je vais faire maintenant, c'est appeler la fonction handle direction. Juste à l'intérieur, nous allons passer par la gauche. Je vais copier le onclick. Je vais copier le onclick. Collons-le ici. Ce ne serait pas une balade dans l'Atlantique. Nous devons le changer pour rouler avec ceux-ci. Je pense que tout va bien fonctionner. Accédez au navigateur. Assurez-vous de l'actualiser. Déplaçons-le vers la droite, clodo, clodo, bougeons-le vers la gauche. Boum, boum, boum. Tu peux voir ? Tout fonctionne parfaitement comme prévu. J'adore ça, mais le slider est assez lent. Revenez en arrière. Laissez-moi vous montrer ce que fait le curseur. Faisons en sorte que cette 0,1 seconde soit terminée. Maintenant, essayons à nouveau. Tu vois que je les adore ? Très bien, tout fonctionne parfaitement bien. Il est temps de l'expliquer simplement que tout le monde le comprenne suffisamment bien. Maintenant, je vais recharger la page. 103. Projet de tableau de bord (créer l'application réagir): Dans cette conférence, nous allons partir de zéro pour créer une nouvelle application React. Alors, sur mon bureau, je vais créer un nouveau répertoire appelé tableau de bord. Cliquez avec le bouton droit sur nouveau dossier. Ce sera capturé sur le tableau de bord. La ligne suivante consiste à glisser-déposer ce répertoire dans le VS Code. Je vais juste ouvrir mon code VS. Donc, pour l'instant, je vais le glisser-déposer ici. Fermez la page d'exemple, puis maximisez le code VS. Ouvrez rapidement le terminal intégré VSCode. Hein ? Je ne dirais pas non. Nous devons générer une nouvelle application React. Et pour ce faire, nous devons utiliser la commande MPS. Np x. Créez Dash React, Dash r. React est utilisé pour créer une application frontale. Nous devons donc l'installer dans un avion d'enregistrement direct. La plaque chauffante nécessaire au développement de notre application frontale sera installée, n'est-ce pas ? Nous sommes dans l'annuaire des clients. Appuyez sur la touche Entrée pour le démarrer. L'installation de React est en cours. React est ensuite installé avec succès. Nous devons entrer dans le répertoire client où nous avons installé le CD React Years, ce qui signifie simplement changer de répertoire client. Ici, nous allons faire du npm. Commencez, appuyez sur la touche Entrée pour le démarrer. Magnifique. Voici la page de Londres d'une application React. C'est tout pour le moment. Dans la prochaine conférence, nous allons nettoyer les plaques de la chaudière en supprimant les fichiers inutiles qui ne sont pas nécessaires à ce projet. Rendez-vous lors de la prochaine conférence. 104. 102 Nettoyer la plaque de chaudière: Revenez à la page des rappels. Dans cette conférence, nous allons supprimer les fleurs inutiles qui ne sont pas nécessaires dans ce projet. Et ces fleurs incluent le test AP, logo à points SVG, le rapport, vitales du Web et les données du test de configuration. Donc, juste au moment où le client a ouvert le SRC. Et ici, nous allons sélectionner le logo point SVG. Maintenez la touche de commande de votre clavier enfoncée, puis cliquez pour sélectionner Rapport, Web Vitals, tests de configuration, logo à points SVG, puis passez ce test. Cliquez avec le bouton droit Supprimer. Magnifique. Et maintenant, l' application se plaint. Voyons d'où vient le problème. Les théories ne peuvent pas résoudre ce type, n'est-ce pas ? Nous devons donc passer à la commande P de index.js pour faire apparaître le champ de recherche en haut. Ensuite, nous allons rechercher le point g de l'index pour le réduire un peu. Commande B pour fermer l'Explorateur. Nous n'avons donc plus besoin de ce type. Ils signalent, opposent leur veto sur le Web, surlignent et suppriment, enregistrent et revoyons d'où vient le problème , se trouvent ici. Est-ce que c'est supprimé ? Quand économises-tu ? Nous devons également supprimer le logo point SVG, commande p, configurer quatre en haut. Surlignons puis supprimons le logo point SVG. Très bien, nous devons donc également tout supprimer. À partir de la ligne C, il y a deux lignes. 19. De la balise d'en-tête d'ouverture à la balise d'en-tête de fermeture. Essuyez-le. Gardez-la bien, il semble que tout fonctionne parfaitement bien. Maintenant. Sortons-le sur le navigateur. heure actuelle, nous allons utiliser un pack Hadrien pour faire quelque chose comme ça. Tableau de bord. Enregistrez et consultez le navigateur. Maintenant, lorsque vous observez l'écran, vous vous rendrez compte que l'étiquette principale est alignée au centre. Revenez à la commande P, puis configurez les CSA. C'est ici. Pouvez-vous voir Align Center. Donc, ici, tout est aligné au centre. Surligne, effacez-le, en toute sécurité dans le navigateur. Et maintenant, la tête d'une dinde est alignée sur la gauche. C'est souvent notre objectif. Dans cette conférence, nous allons décomposer l'application pour comprendre sa structure et la façon dont elle a été perçue. Ensuite, nous allons configurer les structures de dossiers. Rendez-vous lors de la prochaine conférence. 105. 103 Comprendre le flux: Comprendre le projet et configurer la structure des dossiers en suivant les meilleures pratiques. Dans cette conférence, nous allons comprendre le modèle de la structure des dossiers de notre projet. Nous allons découvrir le projet et comprendre la grippe. À l'écran se trouve donc l'application de tableau de bord React que nous allons créer dans ce cours. Passons rapidement à ce projet. Ici, nous avons le top maintenant. Donc, en haut à gauche de l'écran, nous avons le logo du tableau de bord d'administration. Et dans le coin supérieur droit, nous avons les notifications. Sur le bord gauche de l'écran. Nous avons le camp. Maintenant. Ici, nous avons les composants d'information futurs, le composant graphique présentant les composants hôteliers. Et juste en dessous, nous avons la table des transactions n, la table des membres nouvellement joints. Cela dit, comprenons rapidement le flux de l'application en utilisant la navigation latérale pour naviguer dans les projets. Nous avons donc ici les utilisateurs. Lorsque je clique sur l'utilisateur, cela me ramène vers le bas pour le réutiliser en tant que page de liste. Vous voyez, quand je clique sur le bouton Modifier, cela m'amène au profil de l'utilisateur. Vous voyez ici que nous serons en mesure de modifier un utilisateur, puis de mettre à jour les données. Et en haut à droite de l'écran nous avons le bouton Créer. Cela nous mènera donc au composant de création d'utilisateurs. Et voici sa beauté. Passons aux produits. Maintenant, je clique sur les produits. Cela me ramène aux feuilles du produit. Nous pouvons donc sélectionner ici des produits individuels. Nous pouvons trier le produit, filtrer, masquer ou afficher n'importe quelle colonne que nous souhaitons afficher. Et à partir de maintenant, ce n'est plus nécessaire. Lorsque vous cliquez sur le bouton Modifier, vous accédez à la page des produits individuels. Tous ces composants sur les pages seront donc créés dans cette conférence. Alors, passez rapidement de l'héroïne au code VS et créons-les. Commande B pour ouvrir l'explorateur, directement dans le SRC. Cliquez avec le bouton droit sur nouveau dossier. Ce seront des composants capturés, non ? Nous sommes dans l'annuaire compétent. Nous allons créer les dossiers compétents. Cliquez avec le bouton droit sur nouveau dossier. Bien sûr, nous allons avoir les composants de chat. Cela s'appellera donc des graphiques. Donc, en ce moment, nous sommes dans le répertoire de discussion. Nous allons créer les composants du graphique. Maintenant. Cliquez sur Composants, Nouveau dossier. Et nous allons créer le total de l'affichage. Encore une fois, cliquez avec le bouton droit sur les composants. Nous allons créer les widgets de commande Top Nav , qui seront utilisés pour créer le composant des tables de transactions. Et enfin, directement au sein de l'entreprise. Et encore une fois, nous allons créer le widget des membres. Magnifique. Donc, les pages incluent, laissez-moi vous montrer ici que nous aurons la page de liste de produits autour également la page de liste de produits autour de la page de liste de produits unique. Nous aurons la page du produit Cred. Quand il viendra ici. Utilisateurs, nous allons avoir la page de liste des utilisateurs, la page de profil de l'utilisateur, la page de l'utilisateur. OK, donc, quand vous rentrerez chez vous, nous avons créé la partie supérieure des futurs produits. Mais des chats qui affichent un total. Il s'agit de la table des transactions et du composant des membres nouvellement joints. Nous devons donc également créer ce type au sommet ici. Pour ça. Revenez au code VS, cliquez avec le bouton droit sur les composants, le nouveau dossier, puis nous allons créer le futur aliment. Nous allons donc créer le composant filtré, n'est-ce pas ? Dans le champ, cette nourriture. En fait, je t' apprends à écrire du code comme une perle. C'est du moins la raison pour laquelle je veux que tout soit simple. Alors maintenant, on en a fini avec ça, non ? Nous sommes dans le SRC. Nous allons créer un nouveau répertoire appelé pages. Hein ? Lorsque la page est ouverte, cliquez avec le bouton droit sur nouveau dossier. Nous allons faire rénover la page à nouveau par la maison. Nous allons avoir la page du produit créatif. Nous allons avoir la page du produit elle-même, qui contient les produits uniques. Nous allons avoir la liste des produits. Nous allons avoir les utilisateurs. OK, faisons la liste des utilisateurs, le profil utilisateur. Enfin, nous allons avoir la création d'un utilisateur. Parfait. Et maintenant, nous avons structuré notre dossier avec succès. Dans la prochaine conférence, nous allons commencer par le composant Top Nav. Pour récapituler, non ? Ne serait-ce pas le SRC, nous avons créé un répertoire appelé components rights. Dans le répertoire de ce composant, nous avons les chats qui affichaient futurs membres du conseil d'administration de l' hôtel. Nous avons fait les commandes, nous en avons fait assez et le Top Nav. Et tout droit sur les pages, nous avons la page de création du produit, la création d'un utilisateur, la page d'accueil, les produits, c' est-à-dire les produits uniques, nous avons la page de création du produit, la création d'un utilisateur, la page d'accueil, les produits, c' est-à-dire les produits uniques, la liste des produits, à utiliser au moins. Le profil de l'utilisateur est assez simple. Voici donc le composant Top Nav, les composants suffisamment latéraux, le futur composant d'informations, les discussions que l'hôtel split. Il s'agit donc du widget le plus ancien, et voici le widget des membres. Lorsque vous parlez des pages, nous avons également la page de liste des utilisateurs, la page de profil de l'utilisateur et la page de création d'utilisateurs. Nous avons la même chose pour les produits. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 106. 104 composant TopNav: Dans cette conférence, nous allons créer la société Top Nav. Mais avant de continuer, nous devons installer l'interface utilisateur matérielle, qui nous permettra bien sûr d' utiliser les icônes SVG. Tableaux. Il suffit d'imputer beaucoup plus rapidement à Material ui.com. Et cliquez sur Commencer. Sur le bord gauche de l'écran, vous allez voir la baignoire. Juste dans la baignoire. Vous devez cliquer sur Installation. Nous avons ici des conseils sur la façon d'installer le matériel. Vous. Dans ce cas, il suffit de copier la commande npm. Copiez, revenez à VS Code, ouvrez le terminal intégré VSCode, le terminal, le nouveau terminal. Mais regardez, je l'ai déjà ouvert. Donc, ce que je vais faire, c'est faire des réclamations sur CD, puis Command V pour coller la commande npm pour installer du matériel, vous cliquez sur la touche Entrée de votre clavier pour la lancer. L'installation est en cours. Installé, réussi. La prochaine étape consiste à installer spécifiquement Material Icone. Donc, ici, je vais faire le gestionnaire de packages node. installation ajoute une barre oblique à l'interface utilisateur, des icônes, du matériel de tableau de bord , appuie sur la touche Entrée pour la lancer, le tout est fait, installé, soustrait la chute. La ligne suivante consiste à créer le composant Top Nav. Et ce composant sera créé, n'est-ce pas ? Nous sommes dans le premier répertoire de navigation. Donc, cliquez avec le bouton droit de la souris sur la navigation supérieure, nouveau fichier, et je vais l'appeler top Nav point j est, je veux que vous remarquiez le terme utilisé conventionnellement pour nommer ce composant. C'est ce qu'on appelle la convention de dénomination Pascal, qui implique de mettre en majuscule la première lettre de chaque mot. J'enseigne bien, c'est beau. Appuie sur la touche Entrée, RFC, pour générer les composants fonctionnels. Et si ce raccourci ne fonctionne pas pour vous, il vous suffit de vous rendre les extensions , puis de rechercher React. Native réagit facilement aux extraits. C'est ici. Il faut cliquer puis l'installer de votre côté. Retournez à l'Explorateur. La prochaine étape consiste à créer le fichier CSS. Top Nav point CSS. Fermez l'Explorateur. Passons donc au composant Top Nav. Ce que je vais faire maintenant, c'est les surligner , puis les effacer. Donnons maintenant à ce div le nom de classe du conteneur Top Nav, n'est-ce pas ? Nous sommes dans le conteneur de navigation supérieur. Nous allons avoir un autre div avec le nom de classe de top nav wrapper. La navigation supérieure sera donc divisée en deux parties différentes, la partie de bord gauche et la partie de bord droit. Le bord gauche de la navigation supérieure sera donc utilisé pour afficher le logo. Le bord droit sera utilisé pour afficher la notification et le profil d'administrateur. Donc, ici, nous allons avoir une division. Donnez-lui un nom de classe en haut à gauche, juste à l'intérieur de ce div, nous allons avoir un span pour afficher le logo. Et je vais faire Admin Dash. Nous voulons donc utiliser le test comme logo. Ici. Je vais lui donner un nom de classe. Logos. Agréable. OK, affichons rapidement les composants de l'application J Common P set pour ArcGIS. Et puis, ici, nous devons simplement exécuter le composant Top Nav plus près avec une balise à fermeture automatique et nous assurer de l' importer en haut. Ici, sur le terminal, je vais faire des démarrages de npm. Donc, des éléments pour avoir une image réelle de ce que nous faisons. Voici le tableau de bord d'administration en haut à gauche de l'écran. C'est vrai. Nous sommes dans la maison supérieure. OK, bien. Juste à l'extérieur de ce div avec le nom de classe en haut à gauche, nous allons avoir un autre div avec le nom de classe en haut à droite. C'est ici que nous allons organiser la notification et le profil. Juste au moment où organiser la notification et le profil nous allons avoir un div, lui donner un nom de classe, top nav, conteneur d'icônes. Bien, dans cette division, nous allons d'abord avoir l'icône de notification. Et pour obtenir l'icône SVG, nous devons l' importer depuis MES icônes. Importez une notification depuis MUS Slash Icones Dash Materials. Profitons donc de cette opportunité pour importer toutes les icônes nécessaires. Plus calme. Ici, nous avons besoin de la langue, nous avons besoin de l'icône des paramètres. Enfin, nous avons besoin du chat Babu, sûr ou droit. Nous allons donc ici afficher la notification de plus près. Quelle étiquette à fermeture automatique. De plus, nous devons lui donner un nom de classe simplement parce que nous allons le styliser. Icône de navigation supérieure. Et là, nous allons avoir une durée. S'il s'agit du nom de classe du badge de l'icône supérieure, n'est-ce pas, nous sommes dans le code HTML interne que nous voulons afficher à mesure que le nombre de notifications augmente, n'est-ce pas ? Alors regarde ce que je vais faire maintenant. Je vais souligner les lignes 11 à 14. Maintenez la touche Shift enfoncée et appuyez sur la flèche vers le bas pour le dupliquer trois fois. Il vous suffit de continuer à appuyer trois fois sur la flèche vers le bas. Nous devons donc ici rendre le langage. Disons pour mes cheveux ou trois réglages. Nous devons afficher la carte Babu. Le plus simple, c'est que ce soient des notifications. Enregistrez et voyons ce que nous avons. Il indique que la notification n' est pas définie. Oui, bien sûr, nous devons effectuer le changement ici et enregistrer à nouveau. Parfait. Voici donc le logo du tableau de bord d'administration. Voici la notification et Laurie, les choses ne sont pas présentées comme vous vous y attendez. C'est simplement parce que nous n'avons pas de style. Allons-y donc pour afficher la photo de profil de l'armée. Juste après le div de fermeture du nom de la classe, conteneur d'icônes de navigation supérieur, nous allons avoir une balise IMG, SRC equa. Je vais juste copier une photo aléatoire d'un gars sur Internet et la coller ici. Problème Equa. Rapprochons-nous donc rapidement avec une étiquette à fermeture automatique. Enregistrez dans le navigateur. C'est ici. Vous voyez, voici la photo du gars, mais elle n'est pas aussi belle que prévu. Et je t'en ai dit la raison. Dans la prochaine conférence, lorsque nous commencerons à styliser cette entreprise, vous l'adorerez certainement. Très bien, passons à la prochaine conférence où nous allons styliser cette entreprise. Rendez-vous lors de la prochaine conférence. 107. 105 TopNav Css: Dans cette conférence, nous allons styliser le haut de gamme des composants. Et à la fin, nous aurons un très beau Top Nav. Passez rapidement à VS Code. Ouvrez le navigateur supérieur, CSS. C'est ici. Divisons l'écran. Maintenant. Nous allons avoir le CSS ou le bord droit de l'écran. Ensuite, nous aurons le composant en haut à gauche sur le bord gauche de l'écran. Passons à l'image. Laissez-moi vous montrer, pouvez-vous voir que l'image occupe la totalité de l'écran. Et je n'aime pas ça. Stylisons-le rapidement. Nous devons maintenant définir le nom du cluster de l'image. Le nom de la classe est admin, IMD. Copie. Entrez ici, points, puis collez le nom du cluster de l'image, ouvrez et fermez les crochets. Hein ? Entre crochets, nous allons appliquer les styles. La largeur de l'image sera de 40 pixels. La hauteur, ça va être de 40 pixels. Et bien sûr, nous voulons que l'image soit circulaire. Pour ce faire, nous devons spécifier un rayon de bordure de 50 %, ce qui correspond à la moitié de la hauteur de l'image et à la moitié de la largeur de l'image, soit l'image et à la moitié de la largeur 50 %. Avant de passer au navigateur, nous devons donc lier les composants au fichier CSS. Je suis là, tout en haut. Je vais faire une barre oblique de saisie, Top Nav point CSS. C'est aussi simple que cela. Lorsque vous servez et que vous réglez le navigateur. Hé, c'est ça ? Tu peux voir ça ? Maintenant, l'image est aussi belle que prévu. La prochaine étape consiste à styliser le conteneur Top Nav. Alors, mes amis, nous allons trier notre fichier CSS en fonction des noms de classe afin que notre code soit si facile à lire et à comprendre. Donc, ici, juste en haut de l'image, nous allons faire des points, des surlignements, du texte. Viens ici, colle, comme ça. Ainsi, le conteneur Top Nav se trouvera en haut, suivi de l'emballage de navigation supérieur et ainsi de suite. Nous allons donc avoir ici la largeur, 100 %, la hauteur, 50 pixels. La couleur de fond. Je vais choisir Alice Blue. La position dans laquelle il se trouve va être délicate. Le sommet sera nul. Le z-index. Faisons le triple neuf. Génial. Passons maintenant à la dialyse de l'enveloppe de navigation supérieure, qui est la division du graphique vers le conteneur Top Nav. Je surligne et je copie. Donnons-lui une hauteur de 100 %. Rembourrage. Faisons en sorte que ce soit zéro pixel, 20 pixels. Nous allons avoir un écran, Flex. Alignez les éléments au centre. Lorsque vous servez et que vous réglez le navigateur. Magnifique. Donc, ce que nous allons faire maintenant, c'est créer un espace entre le logo et les notifications. Nous devons donc le diviser en deux. Ce gars se déplacera vers la droite , puis le logo sera aligné vers la gauche. Je veux y parvenir. Tout ce que je vais faire , c'est créer de l'espace entre les deux. Je vais donc justifier l'espace de contenu entre deux sauvegardes sur le navigateur. C'est ici. Vous voyez maintenant que nous avons l'amine ici et que nous avons les notifications en haut à droite de l'écran. Continuons. La ligne suivante consiste à styliser le logo. Je surligne puis je copie, je viens ici, je colle. Juste comme ça. Le poids de la police sera en gras. La taille de la police va être. 30 pixels, la couleur. Mettons-le en bleu Alice, plus grossier. Faisons-en un pointeur de sorte que, lorsqu'ils seront épuisés, cliquez dessus avec la souris. Cela en montre assez. OK, laisse-moi te montrer rapidement. Je pense que vous montrer est la meilleure façon de l'expliquer. Ont raison. Vous pouvez le voir plus longtemps simplement parce qu'il est bleu Alice. Donnons-lui donc une couleur de fond. La couleur de fond, rendons-la rouge. Ainsi, la couleur de fond fera bien apparaître le test, car maintenant la couleur du test est blanche, mais pas vraiment. Jette un coup d'œil. Vous voyez, alors quand je place ma souris ou que j'en ai besoin, pouvez-vous voir qu'elle s'affiche comme ça. C'est simplement parce que nous avons défini le curseur comme un pointeur, le rayon de la bordure. Nous voulons donc que les bords de l'arrière-plan soient un peu courbes. Faisons cinq pixels. Police, famille, monospace, marge, haut. Faisons 30 pixels. Enregistrez dans le navigateur. Ils sont plus élevés, non ? Agréable. Précisons le pardon. Ça va faire cinq pixels. Enregistrer. Magnifique. Nous allons maintenant le pousser vers le haut. C'est ici simplement parce que ce type se chevauche en fait. Alors, faisons en sorte que tout soit bien organisé dès maintenant. Nous devons styliser le coin supérieur droit. Ce type soit là, points en haut à droite. Ensuite, nous devons afficher Flex. Alignez les éléments au centre. Enregistrer. Jette un coup d'œil. Vous constatez que tout est bien aligné comme prévu ? Le conteneur d'icônes en haut à gauche est le suivant. Il s'agit donc du conteneur qui contient les icônes. Lorsque vous copiez, cliquez ici, pointez conteneur d'icônes en haut à gauche. Donc, juste à l'intérieur, nous allons avoir la position relative. Bien entendu, le Corso sera réglé pointeur puis sur marge, n'est-ce pas ? Dix pixels. Sûr. Nous avons toujours les mêmes résultats, mais cette fois-ci, un meilleur résultat. Nous nous concentrons actuellement sur le coin supérieur droit de l'écran. K. Donc, la prochaine barge est la barge la plus haute. Permettez-moi de surligner la copie ici. Ne bouge pas. Donnons-lui une largeur. 15 pixels. La hauteur est de 50 pixels. Position. N'oubliez pas que la position précédente était relative. Et maintenant, nous allons les rendre absolus, s'il vous plaît. Ce type va être là. Nous devons trier le CSS en fonction de la classe afin que vous ne soyez pas confus à l'avenir. Lorsque vous faites quelque chose comme ça, votre code devient très facile à lire et à comprendre. Le haut moins 55 pixels. La couleur de fond sera rouge. La couleur qui est la couleur de police sera le blanc. Donc, lorsque vous consultez le navigateur pour le moment, voyons ce que nous avons. Tu peux voir ? Vous allez voir ce fond rouge avec le numéro de notification écrit dessus. La prochaine étape consiste donc à le rendre laïque. Tu peux voir ? Spécifions donc le rayon de bordure. Faisons en sorte que ce soit 50 %. Bien sûr, vous devez comprendre ce que c'est maintenant. Faites en sorte que l'écran soit flexible. Alignons les éléments au centre. Justifiez le contenu au centre. Taille de police. Faisons dix pixels. Lorsque vous enregistrez le navigateur, jetez-y un coup d'œil. Tout est bien aligné comme prévu. J'adore ça. Tu vois, laisse-moi zoomer un peu. Jette un coup d'œil. Tu vois ça ? Maintenant, ce que je vais faire ensuite, c'est changer la couleur des icônes. Je n'aime pas ça comme ça. OK, allons-y rapidement. Je vais venir ici. Il s'agit du nom de classe des icônes. Je vais donc mettre en évidence la couleur pois. Viens ici, icône point, point nef. Donnons-lui ensuite une couleur de l'image W. Enregistrez dans le navigateur. Vous pouvez voir que tout est extrêmement beau. J'adore ça. Alors amis. C'est tout pour le moment. Dans la prochaine conférence, nous commencerons à travailler sur la navigation latérale. Rendez-vous lors de la prochaine conférence. Restez concentré et prenez toujours soin de vous. 108. Composant 106 côtés: Dans cette conférence, nous allons construire la navigation latérale. La fin. Nous aurons une très belle navigation latérale comme cette voiture, non ? Passons donc à VS Code. Ouvrez l'Explorateur et B, puis écrivez le répertoire de navigation latéral. Nous devons créer les composants de navigation latérale. Encore une fois, nous devons créer le fichier CSS correspondant. Juste ici, dans les composants de navigation latéraux. Nous allons générer les composants fonctionnels. Ensuite, nous devons afficher ces droits de navigation latérale dans le composant de l'application. Pour cela, je vais faire une recherche ici. Donnez à ce div le nom de classe du conteneur. Oups, c'est vrai. D'accord. Alors nous voici dans la division. Nous allons épuiser les nerfs secondaires. Et s'il vous plaît, faites bien de l'importer en haut de la page. Très bien. L'idée est donc de diviser l'écran en cinq unités différentes. Ensuite, nous aurons l'unité 1 234,5. La navigation latérale va donc occuper une unité de l'écran. Ainsi, le reste de l' écran sera quatre fois plus grand sur le côté, c'est maintenant assez simple. Le moyen d'y parvenir, de l'implémenter, était donc la flexbox. Donc, directement dans l'application CSA, nous allons créer le conteneur pour afficher les flocons. OK, revenons en arrière pour réciter suffisamment de composants. Ensuite, nous devons spécifier le nom de classe de ce div. Donnez-lui le nom de classe Sidon du conteneur. Je vais surligner puis copier. Viens ici, contenant suffisamment de côté DOD, ouvre et ferme les crochets bouclés. Ensuite, nous allons le faire fléchir. Cela le fera occuper juste une unité de l'écran, c'est aussi simple que cela. Revenons donc à la navigation latérale et commençons à créer la navigation latérale de l'interface utilisateur. Je vais l'effacer. Nous allons avoir un div avec le nom de classe slide now pour notre wrapper par right side now, nous allons avoir un autre div, lui donner le nom de classe du menu de navigation latéral. Donc, juste dans le menu, nous allons avoir un hashtag égal à trois. Donnez à l'histoire un nom de classe assez serré, Hall. Je vais juste faire le tableau de bord, non ? Toujours. Très bien, dans le menu de navigation latéral, nous allons avoir la balise UL, le nom de classe du site de navigation au moins, vrai, nous sommes dans l'UL, nous allons avoir une balise LI. Le LI est le nom de classe de Sidon de l'élément de liste. Hein ? À l'intérieur de. Nous allons avoir une icône. Et bien sûr, vous savez que nous allons importer nos icônes depuis Materia you. Il n'est donc plus nécessaire de revenir sur le site Web car nous l'avons déjà installé ici. Donc, ce que je vais faire maintenant, c'est importer des crochets ouverts et fermés. Lignes tau à partir de la barre oblique MEI, icône, barre oblique, matériau. Ensuite, nous devons le rendre ici. Fermez-la également avec l'étiquette à fermeture automatique. Nous devons lui donner un nom de classe. Donc, si l'une des raisons d'un ClassName est de pouvoir le styliser. Et bon, je vais rentrer chez moi, c'est assez simple. Très bien, sortons le navigateur. Tu peux voir ? Jette un coup d'œil. Maintenant, cela se présente comme suit. Ne t'inquiète pas. Lorsque nous commencerons à le styliser, encore une fois, vous le verrez extrêmement beau. Continuons avec l'interface utilisateur. Donc, juste au moment de la fermeture de la balise LI, nous allons avoir une autre balise LI. Donnez-lui un nom de classe. Cette fois-ci. Ce sera un élément de la liste de navigation latérale, comme celui-ci. D'accord, Kirby. Cette fois, nous devons donc importer l'icône de la chronologie. Faisons en sorte qu'il pleuve ici. Fermez-le à l'aide de l'étiquette à fermeture automatique. Ensuite, nous devons également donner le nom de la classe. Et dans ce cas, les noms des clusters seront les mêmes. Je dois donc juste copier ce gars d'ici. Et puis collez simplement. Ici. Je vais écrire des analyses. Encore une fois. Je dois juste le souligner et le dupliquer. Nous n'avons donc pas à tout taper à nouveau , car qui l'a déjà fait ? Doigné pour le copier-coller. OK les gars, je parle trop. Ici. Nous allons avoir une tendance à la hausse. Nous devons donc changer l'icône. Maintenant, nous allons importer la tendance dans. Très bien, nous en avons deux. La tendance pour le bras droit sera celle des ventes. Alt, Shift F pour formater le code avec prettier. Et bien sûr, si vous ne l' avez pas installé sur votre VS code, tout ce que vous avez à faire est d'aller dans les extensions puis de rechercher plus jolie. Vous l' aurez certainement là-bas. Cliquez sur le bouton Installer pour l'installer. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur. Vous aurez quelque chose comme ça. Donc, ce que je vais faire maintenant, c'est vous montrer le div avec le nom de classe du menu de navigation latéral. Vous pouvez voir sur les lignes 92 que les lignes 25 surlignent. OK, nous devons juste faire de la place ici parce que je ne veux pas que tout le monde s'y perde. Points forts. Voyons voir. Nous devons donc le dupliquer trois fois. 123, simple et court. Lorsque vous enregistrez et cochez dans le navigateur. Hein ? Nous devons donc modifier les icônes et la bonne tâche pour qu'elles correspondent aux spécifications. Commençons par ce gars ici. Je vais juste lui laisser un espace pour que tu ne t'y perdes pas. J'aime enseigner dans une étable en terre battue, Marla. Hein ? Pouvez-vous voir ici que nous allons importer l'icône d' une personne à partir du matériel. Vous modifiez également les utilisateurs de ces outils. Ici, nous devons importer l'inventaire. Écoutez, les gars, vous pouvez le faire votre côté sans plus regarder les cours. Euh-hein. Oui, tu peux le faire. Je vais importer une icône nommée P. Encore une fois, importons l'ensemble des icônes de cette section dans Horse, je vais importer une autre icône appelée assessment. Donc, juste en dessous, nous allons aussi avoir une fosse. Nous devons remplacer l'écriture par, supposons des produits. Ensuite, nous allons procéder à une évaluation. D'accord. Pouvons-nous laisser cela comme une vente ? Oui, on peut, mais je vais juste m'occuper de la transaction. Enfin, je vais dupliquer cette balise LI ici. Ensuite, nous devons importer une autre arborescence d'événements d'icônes. Il semble donc que j'ai fait quelque chose qui n'est pas là pour l'évaluation. C'est censé être un rapport. Et ici, nous allons faire l'inventaire. Et ceux-ci feront l'objet d'une transaction. Passons donc à la ligne suivante. Ce type est là, laisse-moi te montrer. Nous en avons donc terminé avec ça. D'accord ? Nous passons maintenant à la section suivante de la navigation latérale. Et vous pouvez le faire à la fin, comme je l'ai dit plus tôt. Pour cette section, nous allons importer. Importons donc l' icône email karma. Importons le classement des icônes. Enfin, pour cette section, nous devons importer une icône de bulle de discussion. Il s'agit de la première, de la deuxième et de la troisième section. Ici. J'avais tendance à envoyer des e-mails. La rédaction sera envoyée par e-mail. Ici. Changez-le en tableau de chatbot. Ici, est-ce que ce serait un message ou des messages ? Pour ainsi dire ? Bien entendu, la dernière étape de cette section sera la notation. Le bon espoir sera de réussir. C'est donc la dernière de toutes. Voyons ce que nous avons fait jusqu'à présent. Vous pouvez voir qu'il est très beau même sans le stabiliser. Donc, lors de la prochaine conférence, nous le rendrons certainement parfait ou juste. Passez donc au code VS et continuons. Importons les icônes nécessaires dont nous avons besoin pour la dernière section. Placez une virgule ici. Nous avons besoin de comptes de gestion, plus calmement, nous avons besoin d' analyses, plus calmement. Enfin, nous avons besoin de rapports. Ici. Nous devons changer ce type pour gérer les comptes. Et ici, en haut à droite, se trouve la section Gérer les analyses. Il y aura des analyses ici. Enfin, nous allons avoir des rapports. Et voici les rapports. Enregistrer. Tu peux voir ? Tout fonctionne donc parfaitement comme prévu dans cette conférence. Avant de passer à la prochaine conférence, nous devons faire quelque chose. Ici, vous verrez un tableau de bord. Les tableaux de bord et les tableaux de bord se trouvent dans cette section. Cette section est censée être une section différente et non la section du tableau de bord. Nous devons donc revenir au code, spécifier les sections. Disons que ce sera le menu d'administration. Vous pouvez le modifier comme bon vous semble de votre côté. Mais la dénomination doit être pertinente. Ici. Voyons les notifications. Enfin, nous pouvons voir ici nos équipes écrivent simplement quelque chose qui est pertinent pour l'application que nous développons en toute sécurité. Sur le navigateur. Ce sont ceux-là. Tu peux voir ? Tout fonctionne parfaitement comme prévu dans cette conférence. Ainsi, dans la prochaine conférence, nous commencerons à styliser cette entreprise. Et à la fin, vous le verrez extrêmement beau. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentrés et prodiguez des soins holistiques. 109. 107 Css latéral: Dans cette conférence, nous allons commencer à styliser le composant de navigation latérale. À la fin. Vous aurez un look extrêmement fin. Passez au code VS et continuons. Ouvrez le CSS de navigation latérale. Et ici, nous devons diviser l'écran en deux parties. Le bord gauche de l'écran sera réservé aux entreprises suffisamment alimentées, et le bord droit de l'écran sera réservé à la navigation latérale, le CSS. OK, commençons donc par le conteneur de navigation latéral. de la conférence précédente, nous avons eu la possibilité de ne faire qu'un, ce qui occupera des unités de l'écran entier. D'accord ? Maintenant, donnons-lui une hauteur. Un V rouge, dont position de 50 pixels va rester collante. La couleur de fond sera le bleu Alice. Les 50 meilleurs pixels. Une fois cela fait, relions le composant au fichier CSS. Importations. Sûr sur le navigateur. Tu peux les voir ? Parfait. La ligne suivante est l'enveloppe de navigation latérale. Bien sûr, nous avons commis une petite erreur. Il faut que ce soit allumé, s'il te plaît. Vous devez être indulgent, car j' ai refusé d'enregistrer du son. Bien sûr, je ne suis pas un robot. Nous sommes des humains et nous pouvons parfois faire des fautes d'orthographe. D'accord ? Rembourrage, 20 pixels. La couleur, nous allons la faire en sorte que ce soit le gris. Donc je vais faire cinq par cinq comme ça. Le nid est le menu de navigation latéral. Ce gars ici, copie, viens ici, points, menu de navigation latéral. La marge inférieure sera de dix pixels. La liste est la face actuelle du titre. Copie, viens ici. Dod, titre assez long. Nous allons avoir la taille de police qui correspondra à celle des images. La couleur, qui est la couleur de police, RGB. Quand c'est sept, virgule un, virgule un c'est six, sauvegardez et voyez ce que nous avons sur le navigateur. Cool. Tu vois, maintenant ça devient sympa. Rendons-la plus belle. La ligne suivante est la navigation latérale, au moins. Veuillez prendre note de la façon dont je configure le CSS en fonction des noms de classe. C'est l'une des façons d'écrire du code comme un pro. J'espère que tu apprends quelque chose de beau. Pour la liste de navigation latérale, nous allons supprimer ce point ici. Tu peux voir ? Alors sortons-le. Nous allons le faire sous forme de liste. Nous n'en aurons aucun. Enregistrez et procédez au paiement dans le navigateur. C'est parti. Tu peux voir ça ? Continuons. Revenez. Alors. Nous allons spécifier le rembourrage doit être de cinq images. Pour l'élément de navigation latérale, qui est l'élément de la liste de navigation latérale, l'élément liste d'inscription par points, le rembourrage, cinq pixels. Faisons en sorte que les coûts soient indicatifs. Alors, faisons en sorte qu'il affiche Flex. Alignez les éléments par rapport au centre et au rayon de la bordure. Faisons cinq pixels. Lorsque vous enregistrez et revenez au navigateur. C'est ce que vous obtenez, vous avez raison. Nous avons maintenant terminé l'élément de la liste de navigation latérale. La ligne suivante permet de surligner les éléments lorsque vous placez votre souris dessus. Je vais donc simplement les copier à partir d'ici. Collez les crochets. Et ici, je vais utiliser une virgule active. Copiez à nouveau ce type. Lorsque vous passez la souris sur l'élément de la liste, nous allons spécifier que la couleur d' arrière-plan doit être RGB. Ça peut vraiment le rendre bleu Alice. Mais allons-y. Alors. Nous allons changer la couleur des téléphones en noir. Lorsque vous enregistrez dans le navigateur lors du paiement. Maintenant, lorsque vous passez votre souris dessus, vous obtenez cette jolie boucle ici. C'est bon. Enfin, nous devons ajouter de la couleur pour choisir suffisamment d'icônes. Donc, cet angle, ici, nous devons lui donner la même couleur avec l'icône de navigation supérieure. Donc, ce que je vais faire maintenant, surligner l'icône suffisamment latérale. Viens ici. Dod, icône assez latérale, ouvrez les crochets bouclés. Et bien, pour mettre entre crochets, nous devons appliquer les styles. Mon droit général. Faisons cinq pixels. Taille de police, 20 pixels. Et la couleur, qui est la couleur de l'icône, sera le bleu Dodger, en toute sécurité et à la caisse. Le navigateur. Vous pouvez voir que tout fonctionne parfaitement en tant que spectateur. Et c'est extrêmement beau. Alors allons-y jeter un œil. Tu peux voir ? Ça a l'air sympa. J'adore ça. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 110. 108 composante d'article: Dans cette conférence, nous allons nous concentrer sur les futurs articles, les composants , les revenus, les rendements des ventes, les prophètes. Cliquez rapidement sur le code VS et allons-y. La première chose à faire est donc de diviser également les écrans en unités. Comme nous l'avons fait lors de la conférence précédente. Ouvrez l'Explorateur. Ensuite, dans le répertoire personnel, nous allons également créer un nouveau composant appelé Whom point gears. Nous devons créer le fichier CSS correspondant. Hein ? Nous sommes dans la maison où nous sommes, nous devons générer le composant fonctionnel. Ensuite, nous allons donner à ce div le nom de classe du conteneur que je vais surligner puis copier. Importons rapidement le fichier CSS. Qui point CSS. Alors, c'est vrai, nous sommes dans le CSS d'accueil. Nous devons styliser le continu. L'idée est donc simple. Laisse-moi te montrer. Nous voulons que cet espace soit six fois plus grand sur le côté maintenant. Très bien, c' est extrêmement simple de le faire. Tout ce que nous avons à faire, c'est Flex Six. Donc, quand tu feras ça, ce gars ici sera six fois plus gros que les nerfs latéraux, ce qui signifie simplement que le système de navigation latéral va entrer six fois dans cet espace . C'est aussi simple que cela. Si vous voulez entrer quatre fois, tout ce que vous avez à faire est de le changer en Flex for. Donc, une fois que vous aurez fait cela, cet espace sera quatre fois plus grand que sur le côté de Spades maintenant. Permettez-moi de vous le montrer dans Protocol. Revenez à notre composant d'application , puis nous allons exécuter les composants d'accueil. Ici, nous devons importer qui à partir de points, de slash, de pages obliques, de home slash, de home. Enregistrez et revenez dans le navigateur. Vous ne pourrez peut-être pas l'observer, n'est-ce pas ? Donc, pour l'instant, je vais vous aider à venir ici, à revenir au CSS d'accueil et à spécifier la couleur de fond. Faisons en sorte qu'il soit rouge. Bien. Très bien, je veux que vous observiez l' espace ici. C'est sous l'espace que nous avons ici. Donc, quand je serai ici, Flex Six et économise. Montre. Tu peux voir ça ? Cet espace devient donc six fois plus grand que l' espace de la navigation latérale, ce qui implique simplement que le côté actuel va entrer six fois dans cette partie . Je vais donc vous laisser le soin de vous faire votre propre jugement à la fin et choisir l' espace approprié qui conviendra à votre projet. Mais pour moi, je vais m'en tenir à ça. Effaçons le fond rouge. Maintenant, c'est à Lee que le plaisir commence. Lorsque le composant ouvre les composants, n'est-ce pas ? Nous sommes dans le futur annuaire. Nous allons créer un nouveau composant appelé Featured Dot. Créez le fichier CSS correspondant. Nous sommes dans le futur. Générons également le composant fonctionnel. Nous devons importer le fichier CSS pour ne pas oublier de le faire. En vedette mais des CSA. Parfait. OK, commençons. Donnons à ce div le nom de classe featured. OK, nous allons éliminer ce gars, nous allons le décharger. Juste à l'intérieur de cette division. Nous allons avoir un autre div avec le nom de classe du futur objet, n'est-ce pas ? Nous en sommes au futur article, nous allons avoir une plage avec le nom de la classe, le titre. Et le titre sera Revenue. Bien sûr, cela peut être tout ce que vous voulez, mais laissez-le être pertinent pour l' application que nous développons. Nous allons avoir une autre division ici, lui donner le nom de classe Featured, Featured Money Container. Et rénover la division. Nous allons avoir un tag Span. Le nom du cluster sera affiché sous forme d'argent. Alors je vais le faire ici, nous allons avoir une autre période. Donnez-lui un nom de classe. Lectures d'argent en vedette. Nous voulons donc également afficher une icône ici. Donc, ce que nous allons faire ensuite, c'est importer l'icône à partir de l'icône des matériaux. Ici, en haut. Je vais faire des importations. Flèche vers le bas depuis l'icône des matériaux. OK, nous avons besoin de la flèche du clavier. Flèche du clavier vers le haut, juste entre la plage. Nous allons courir morts. Plan rapproché du clavier de la balise à fermeture automatique et spécifiez le nom de la classe. En vedette. Icône en haut. OK, la raison en est que je vais les styliser différemment. Oui, c'est exactement pour cela qu'il aura des noms de classe différents. Ensuite, nous allons avoir un autre span juste après le div de fermeture avec le nom de classe du futur conteneur démoniaque. Ce gars ici, voici la discussion finale. Nous allons avoir une autre période. Donnez-lui le nom de classe du futur Serbe. Je vais le faire par rapport aux dernières ventes. Une fois cela fait, nous devons effectuer le rendu de ce composant, n'est-ce pas ? Nous sommes dans la composante maison. Ici. Tu n'as qu'à supprimer ce gars. Nous allons effectuer le rendu. Composants futurs. Ont raison. Fermez-le à l'aide de la balise à fermeture automatique et assurez-vous de l' importer. Lorsque vous enregistrez et quittez le navigateur. C'est ici. Tu peux voir ? Maintenant, nous avons un moment comme celui-ci. Nous avons donc 1234. Donc, ce que je vais faire maintenant, c'est le dupliquer trois fois. Retournez à Vue.js. Sélectionnez le div avec le nom de classe de l'élément vedette, le div d'ouverture et de fermeture. Donc, ce que je vais faire, c'est le dupliquer trois fois, comme ça. Ensuite, il vous suffit de modifier les informations et de me laisser le faire pour vous. Il s'agit des recettes. Ce seront donc des ventes. On peut dire que les ventes sont de 9 000, peu importe. Ensuite, nous pouvons faire en sorte que cela ressemble à ceci. Nous devons modifier l'icône ou vous pouvez décider d'utiliser l'icône de votre choix. C'est juste un choix. Donc, pour moi, je vais utiliser une icône appelée trending up friends. Vous pouvez en fait consulter toutes ces icônes sur leur site Web, accord, material ui.com, vous pouvez consulter toutes ces icônes là-bas. Je ne veux donc pas vous faire perdre votre temps à vous y emmener car cela n'a pas vraiment d'importance puisque nous pouvons l'importer directement d'ici. Hey, je vais m'occuper de toutes les tendances. Le Cs est assez élevé. Nous pouvons utiliser la flèche pour augmenter la superficie de l'Europe. Voici donc ce qu'il en sera pour les retours. Je vais faire comme ça. Je vais faire comme ça. Ensuite, nous devons changer l'icône. Sont vers le haut. Vous pouvez maintenant utiliser n'importe laquelle des icônes. Flèche vers le bas, c'est cool. Il n'y a aucun problème à ce sujet. Parce que notre rendement n' est pas si élevé. Donc, pour le dernier, ce seront les flux professionnels. Donc, ce que je vais faire maintenant, c'est faire des profits. Écoutez, tout le monde aime profiter de quelque chose. Je te le dis franchement. Et les bénéfices, nous allons les porter à un niveau extrêmement élevé. Tout le monde aime prospérer. Nous devons donc changer l'icône vers le haut. OK, très bien. Cela fait, nous devons également spécifier le nom de la classe respectivement. Donc, ici, je vais faire quelques points, icône vers le haut. Faisons en sorte que ce soit négatif parce que nous voulons les styliser individuellement. Nous pouvons faire en sorte que cela soit positif. Comme tu veux. Permettez-moi également de rendre cela positif. Comme tu veux. On peut dire que le rendement devrait être négatif. C'est bon, on peut y aller. Découvrez-le sur le navigateur. Nous avons 1234. Parfait. Cependant, cela n'a pas l'air beau comme prévu. Ne t'inquiètes pas. Encore une fois, lors de la prochaine conférence, lorsque nous aurons fini de styliser ce composant, vous allez certainement l'adorer. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 111. 109 Article en vedette: Revenez à la page des rappels. Dans cette conférence, nous allons commencer par styliser la composante à quelques points. Conservez le code VS, et allons-y. Vous devez donc ouvrir le futur CSS , puis le G en vedette divise l'écran comme d'habitude. Mais avant de poursuivre, je voudrais faire quelque chose. Laisse-moi te montrer cette vidéo ici. Nous allons lui donner un nom de classe différent. Donc, là, ce sera le futur article B. Ensuite, chaque fois que vous retrouverez le futur article , nous allons le faire C. Et enfin, nous allons faire d. Nous cherchons donc un moyen de les styliser différemment. En d'autres termes, nous allons appliquer couleurs différentes à chacun de ces tufs. Donc, une autre chose que nous devons faire ici avant de procéder à la stylisation de l'obligation est de vous montrer les icônes. Nous leur avons donné ClassName, et nous avons fait apparaître l'icône du filtre. Je ne pense pas que ce soit une bonne chose. Vous devez donc sélectionner le futur élément op, commande D pour désélectionner toutes les occurrences. Je pense que c'est tout pour le moment. Maintenant, utilisez la flèche droite pour le déplacer vers l'avant, effacez la sauvegarde, puis passons aux CSA. Tout d'abord, nous devons styliser le futur. Donc, en gros, nous voulons que ce type apparaisse dans une entreprise horizontale. Donc, pour ce faire, venez ici , mettez-le à l'avenir, alors la largeur sera de 100 %. Faisons preuve de flexibilité d'affichage. Alors sauvegardez et découvrez l'effet de ce flex que nous utilisons ici. Pouvez-vous voir maintenant que tout apparaît comme ça. Créons donc un espace entre chaque élément. D'accord ? Pour ce faire, c'est extrêmement simple. Justifiez le contenu, espacez le moment où vous enregistrez et celui où vous quittez le navigateur. Vous voyez maintenant que nous avons un espace entre chaque élément. Très bien, il apparaît déjà comme prévu. Écoutez, nous devons juste le rendre plus beau. Le point suivant est le futur article. Surlignez et copiez, venez ici, élément filtré par points. Ensuite, nous allons le faire fléchir. La marge est de zéro pixels, de deux pixels, puis de dix pixels supérieurs. Rembourrage. Pour des procès épiques. Le rayon de bordure est de dix pixels. Le causal. Donc, un jour, l'utilisateur passe la souris et a besoin, elle affichera un pointeur d'un magnifique avant, n'est-ce pas ? Oui. Et la couleur de fond. Je vais utiliser Anticline Hide. Très bien, lorsque vous enregistrez et consultez le navigateur, vous verrez que, oups, cela devrait faire 30 pixels. Encore une fois, enregistrez et revenez en arrière. Donc, ce que nous allons avoir plus d'espace ici en tant que Lee , c'est de spécifier l'ombre de la boîte. Et bien sûr, vous pouvez le publier sur Internet en rendant sur le site Web de box-shadow, puis vous serez en mesure de vous faire votre propre jugement et d'utiliser le box shadow approprié qui conviendra à votre application. Pour moi. Encore une fois. Je vais juste copier et coller parce que je l' ai déjà en tête. C'est donc tout au cas où vous voudriez utiliser mon propre box shadow. Comme ça, juste des valeurs comme celles-ci. K. Donc, ce que je vais faire maintenant, c'est le surligner puis le dupliquer. Ici, je vais l'appeler élément filtré B. Encore une fois, mettez en évidence ce type dupliqué. Ce sera l'élément vedette C. Enfin, ce sera l'élément filtré D. Lorsque vous enregistrez et quittez le navigateur, tout devrait apparaître correctement maintenant, parfait. C'est le résultat attendu, mais il ne reste plus qu' à changer les couleurs. Pour le foetus. Élément B, la couleur de fond va être filtrée à l' eau. Élément C. La couleur de fond sera le violet. Alors la querelle autour de l'article D sera le lieu du hijab. Bien sûr, tu savais à quel point j'aime ces Da Jia Bu. Et j'espère que vous pouvez tout voir clairement. Il m'a dit si tu voyais clairement ou non. Ok, tu peux voir clairement. C'est bien. Jetons un coup d'œil au navigateur. Magnifique. J'adore ça. Très bien, concentrons-nous donc sur les polices. À l'heure actuelle. Nous allons styliser le futur en fonction du titre. La taille de la police n'est que de 20 pixels. Ce n'est pas trop. Puis le conteneur d'argent filtré, ce type. Imaginez dix pixels, zéro pixel. Nous allons avoir un écran flexible. Ensuite, alignons les éléments au centre. Le nid, c'est l'avenir de l'argent. Et s'il vous plaît, vu la façon dont j' organise ce fichier CSS, vous devriez suivre mon exemple. Cela vous aidera certainement à l'avenir. Taille de police, 30 pixels. Font Weeds est en gras. La future Margaret, oups, regarde ce que j'ai fait ici. Les gars, écoutez, j' enregistre à neuf heures, alors s'il vous plaît, vous devez m'appeler. Donc, ce que je vais faire maintenant, c'est mettre en évidence tous les cas de pneumonie futurs. Commande D pour effectuer votre multicœur. Donc l'édition, qui consiste normalement à sélectionner toutes les occurrences. Je dois juste déplacer ma souris ici et le faire comme ça. Copie. Faisons en sorte qu' il affiche Flex. Alignons les éléments au centre. La couleur, qui est la couleur de la police. Rendons-le vert. Ensuite, nous voulons que la future icône négative soit de couleur rouge. Ensuite, la taille de police Futura taille de police est de 15 pixels. La couleur. D'accord. Enregistrez, et voyons ce que nous avons maintenant. Parfait, si simple et agréable. Je les adore. Vous pouvez donc modifier certaines couleurs si vous le souhaitez. Mais pour moi, je suis Qu et j'en suis satisfaite. Ça va ? C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 112. Composante 110 graphique: Revenez à la page des rappels. Dans cette conférence, nous allons implémenter le chat Analytics. Et bien sûr, ça va être tellement intéressant. Ne t'inquiète pas. C'est très simple à faire. Alors ne paniquez pas du tout. Cliquez rapidement sur VS Code et passez moins de Heron au code VS. Tout d'abord, nous devons mettre en place la structure de la forêt et tout ce qui s'y rapporte. Ouvrez donc les composants et écrivez dans le répertoire des discussions. Nous allons créer un nouveau fichier appelé charts dot js. Créez rapidement le fichier CSS correspondant. Hein ? Dans les composants de la maison. Nous allons rendre le graphique G est. Mais pour l'instant, nous devons générer le composant fonctionnel et nous diriger vers la maison où G se trouve juste ici. Nous allons avoir un div, lui donner le nom de classe du widget d' analyse des chats. Hein ? Nous sommes dans la division, nous allons afficher le composant graphique de plus près avec la balise à fermeture automatique et nous assurer de l'importer en haut. Appliquons rapidement des styles à la classe de widgets d'analyse du chat. Helen to Home SSS Dot Chat Rejette. Ce que nous allons faire, c'est Display Flex. C'est aussi simple que cela. Hein ? Nous avons maintenant terminé la configuration. Il est temps de passer à l'analyse du chat. Pour un chat Analytics, nous allons utiliser une bibliothèque externe appelée recharge. Et le voici. Donc, de l'héroïne pour atteindre .org, nous pouvons ouvrir le guide et voici exactement comment installer des retards. Donc, ce que je vais faire maintenant sur le terminal, c'est que npm install retarde VS Code , puis Control C pour arrêter le serveur en cours d'exécution. Npm install, accédez à des publicités comme celles-ci. Mais même si je l'ai déjà installé, je le fais juste pour vous montrer exactement comment l'installer. Alors, pendant l'installation, reprenons contact avec vous , puis cliquez sur des exemples. Donc, d'abord, nous allons copier ces données ici à partir de lignes pour deux lignes, 47, copiez. Viens ici, va au chat GS Command B pour fermer l'Explorateur. Ensuite, nous devons coller les données ici. Ce sont donc les données que nous allons utiliser. Revenez également ici, nous devons copier ces importations. Mais si, nous allons supprimer quelques entrées inutiles. Viens ici au sommet. Comme ça. Richard a été installé avec succès. Il est temps de sortir du lot. Revenez à nouveau aux lectures, puis à l'API. Et nous voulons utiliser les cartes de zones. Vous pouvez continuer à utiliser le chat de votre choix. Mais dans ce cours et aux fins de notre obligation, c'est le tableau que nous allons utiliser. Il suffit donc de copier à partir de la balise de discussion de la zone d'ouverture, de la balise de fermeture, de surligner et de copier. Revenez au code VS, sélectionnez le def, effacez-le, puis collez. Ainsi, lorsque vous enregistrez et exécutez l'application, elle se plaindra certainement de la raison pour laquelle c'est simplement parce que nous devons importer les discussions de zone en haut. Supprimons donc ces entrées inutiles. Importe les graphiques de zones et nous devons également importer des zones comme ceci. Et la légende parle d'entrées inutiles. Le conteneur réactif sera donc utilisé à l'avenir. Nous n'allons donc pas le supprimer. Le K. Nice. Notre droit. Formatons le code, décalons f, formatons le code. Et maintenant, nous avons une indentation appropriée. OK, réexécutons rapidement l'application. Statistiques de maman. Voici l'analyse du graphique. Ne t'inquiète pas. Nous allons le cartographier avec nos propres données. Alors maintenant, nous avons le Y et le X. Sont-ils ? Revenez au code VS et faisons les choses correctement. La première chose que nous allons faire est de changer les données ici, le nom, nous voulons que cela commence à partir de janvier. Voici les dépenses. Ce seront des retours. Et là, nous allons être totalement plus difficiles, n'est-ce pas ? Vous pouvez donc indiquer où vous voulez faire ici, mais c' est censé être ainsi. Encore une fois, il y aura le mois de février. Cela va coûter cher. Les gars. Je pense que vous pouvez continuer avec la fin subtile. Ce seront des retours. Cela va être total. Et tu dois mettre une colonne ici. Il suffit donc de modifier l'ensemble des données. Mais pour moi, toutes ces données sont prêtes. Je vais donc juste copier et coller. Donc, si vous souhaitez copier ces données, il vous suffit de consulter les documents néerlandais. Et puis vous allez trouver tous ces onglets ici. J'ai organisé les données en conséquence afin que vous puissiez absorber, mettre la vidéo en pause et saisir la mienne si vous le souhaitez. Alors laisse-moi le jouer lentement. Vous voyez que vous pouvez mettre la vidéo en pause ? Vous pouvez donc simplement taper toutes ces informations ici, c'est assez simple. Maintenant, nous devons revenir ici. La largeur de nos cartes sera de 30, la hauteur de 350. Et boum, un pompon à partir des dix premiers, droite à 30, à gauche à zéro et au bas à zéro. On est d'accord avec ça. Il n'y a aucun problème. Mais une dernière chose que nous allons faire est d'ajouter le dégradé de lignes, qui est ce gars ici. D'accord ? Encore une fois, ici, je vais les coller, tout cela dans les documents du tableau de bord. Voici donc exactement ce qui affichera certains des éléments. Copiez-le, puis dupliquez-le une seule fois. La clé des données ici sera celle des dépenses. Et ici, la clé de données sera le retour. Nous traçons donc le graphique avec nos propres données en ce moment. Ici, la clé de données sera totale. Exactement ce que tu as ici. Dépenses, retours à Tau. D'accord ? Tout est correct. Retours. Parfait. Sortons-le sur le navigateur. Vous voyez bien, les gars, je veux que les retours apparaissent en rouge. Nous devons revenir en arrière et faire quelque chose pour y remédier. Donc, voyez-vous que les rendements ici utilisent la couleur PV, qui est ce dégradé linéaire. Et c'est le dégradé linéaire que nous avons créé nous-mêmes. Cela sera donc appliqué aux retours. Et l'identifiant s'appelle RV Copy. Ensuite, en ce qui concerne les retours, nous allons faire du camping-car en couleur. Lorsque vous enregistrez et quittez le navigateur. Vous voyez que tout s' est bien passé comme prévu ? Mais même si ce n'est pas bien aligné, ne vous inquiétez pas. Dans la prochaine leçon, nous allons utiliser le CSS pour terminer le travail. Mais pour l'instant, faisons rapidement un récapitulatif de VS Code juste en haut. Donc, pour utiliser le graphique, nous devons d'abord installer une bibliothèque externe appelée retards. Et puis tout cela est importé depuis le module de vente au détail. La zone, le graphique en aires, l'axe X, l'axe Y et bien d'autres encore. Ce sont donc les données que nous utiliserons pour tracer le graphique. Nous avons donc ici le nom et le nom sera sur l'axe des abscisses. Laisse-moi te montrer rapidement. Vous pouvez voir que c'est l'axe X. Vous avez donc ici janvier, février, mars, avril, mai, juin à juillet. Le reste de ces données sera donc tracé sur les axes x et y. C'est pourquoi vous pouvez les voir ici. C'est donc tout pour les données. Et voici les retards. Et puis on lui donne une largeur de sa hauteur de gras de 350. Et puis les données ici sont les données que nous voulons utiliser, à savoir cet homme. Permettez-moi de vous montrer ces données ici. Donc, si je le nomme data , je dois aussi venir ici et l'appeler TBI. Lorsque vous dites ventricule au navigateur, ce sera pareil. Correct ? Vous pouvez donc le laisser comme ça ou vous pouvez simplement regarder l'entité avec les données par défaut. Passons maintenant au dégradé de couleurs. Cela dépend donc vraiment de vous. J'ai personnellement créé ce dégradé parce que je voulais que les retours apparaissent sur une couleur rouge. Je dois donc créer moi-même ces colonnes dégradées rouges. Mais celle-ci, le vert et cet autre gars qui apparaissent ici, est une sorte de couleur par défaut de Rachel. Vous pouvez ainsi créer plus de couleurs et ajouter plus de détails. Il s'agit alors de l'axe X. L'axe X prend la clé de données du nom, qui correspond aux mois de janvier, février, mars, avril, mai à juillet. Nous avons donc tracé le nom sur l'axe des abscisses. Voici donc l'axe Y. Et puis nous avons les deux dents, en fait la pointe de l'outil. Laisse-moi te montrer rapidement. Lorsque je place ma souris dessus, les deux dents aident à afficher les informations. Donc, lorsque vous le retirez, par exemple et que vous enregistrez, voyons ce qui se passe. Maintenant. Pouvez-vous voir que lorsque vous placez votre souris dessus, vous n' aurez plus les détails. C'est vrai. C'est donc un peu comme ça pour TBS. Il vous donne des conseils sur la nature du graphique à un point donné. Vous pouvez voir à ce stade les dépenses sont de 1 200 dollars, alors le rendement est de 23 300, le point le plus simple. Et ici, vous êtes du genre à être monotone. Dépenses liées aux clés de données. Hé, j'ai l'impression d'être de cette couleur. Et puis l' opacité de remplissage est une. Ainsi, l'URL du carburant, qui est dans ce cas la couleur que vous souhaitez utiliser, est l' identifiant de couleur du dégradé que nous avons créé. C'est donc aussi simple que a, B, C. Et pour l'instant, je vais vous dire, prenez soin de vous et à la prochaine conférence. 113. 111 graphique Css: Déjà, le chat Analytics est extrêmement beau. Mais voyons s' il y a quelque chose que nous pouvons faire pour l'aligner de manière plus parfaite. Parce que, comme vous pouvez le constater, il n'y a pas d'espace entre les analyses de données et les informations sur les fonctionnalités. Ajoutons-le rapidement à VS Code. Et assurez-vous d'importer le fichier CSS, bien sûr, pour le placer dans le composant graphique. C'est donc la façon de lier votre fichier CSS au composant. Directement dans l'interface utilisateur. Nous allons faire une plongée ici. Donnez à ce div le nom de classe du conteneur de graphiques. L'application se plaint donc simplement parce que vous ne pouvez pas avoir l'élément GSS en dehors du nœud parent. Surlignons donc un réacteur pour baliser la balise de fermeture, précédent, la touche Alt de votre clavier, puis appuyez sur la flèche vers le haut pour le déplacer dans ce div avec le nom de classe Chad Container. Et rapidement, nous devons styliser ce div, ouvrir le CSS du chat. Alors là, nous allons le faire fléchir. Donnons-lui un rembourrage de dix pixels. Et maintenant, vous allez voir l'espace entre les deux marges en haut. La marge supérieure est de 30 pixels. Enregistrez et vérifions-le. Exact. Maintenant, il est bien aligné. Nous avons un espace entre le graphique n, les informations futures. La ligne occidentale sert à spécifier l'ombre du cadre. C'est donc mon propre boxshadow. Vous pouvez décider, je vais vous montrer quelque chose rapidement. Allumez Internet. Donc, ici, il vous suffit de configurer le générateur Box-Shadow. C'est ici ? Vous pouvez voir ici que vous pouvez créer votre propre ombre. Très bien, donc, oui, beaucoup enregistrent le code. Pouvez-vous voir que tout fonctionne parfaitement bien. Ainsi, lorsque nous commencerons à travailler sur le côté droit de l'écran, vous le verrez en très bon état. Rendez-vous lors de la prochaine conférence. 114. Configuration de style: Très bien, donc avant de passer à la section d'affichage total, nous devons effectuer quelques configurations de réglage. Et c'est extrêmement simple. Alors, dirigez-vous rapidement vers les matériaux du tableau de bord qui se trouvent à l'intérieur. Vous n'avez qu'à ouvrir la boîte pour vous aider. Ensuite, nous allons copier ce tau surligné. Copie. Revenez au recodage, ouvrez le point d'index HTML. Ensuite, il ne reste plus qu'à trouver un endroit où coller les paramètres. Très bien, faisons-le ici. Collez, puis enregistrez. Maintenant, attendons de mieux voir le résultat. Je l'adore comme ça. Donc, dans cette conférence, nous allons procéder à l' affichage du composant tau. On se voit alors. 115. 113 composante totale: Passons à l' affichage du composant tau. Passez donc rapidement à la barre de progression circulaire React. Et voici l'adresse. Vous pouvez également rechercher la barre de progression circulaire de React. C'est ici ? Par ici ? Vous allez voir une barre de progression différente directement sur cette page. La première étape que nous allons faire est donc d' installer la barre de progression circulaire React. Alors suivons les conseils. Donc, si vous utilisez yum, ce conseil est pour vous. Et si vous utilisez MPM, voici les conseils qui vous sont destinés. Donc, ce que je vais faire, c'est copier ce conseil ou cette commande, puis revenir à VS Code. Fermons ça. Contrôlez C pour arrêter le neurone actuel sur le serveur. Ensuite, je dois juste coller ce conseil ici ou cette commande. Appuyez sur la touche Entrée pour la faire démarrer. Installé. Réussi. Magnifique. Ouvrez donc l'explorateur, fermez le chat Jess down, commandez B pour ouvrir l'explorateur. Ensuite, ouvrez le composant qui s' affiche dans notre répertoire, nous allons créer un nouveau composant appelé les dossiers hôteliers divisés. Créez le fichier CSS correspondant. Passons à la RFC de l'hôtel partagé pour générer le composant fonctionnel. Bien. Faisons en sorte qu'il soit rendu rapidement , d' accord, nous sommes chez nous. Passons ensuite à ce div avec le nom de classe du widget analytique Charles. Il va apparaître juste en dessous du graphique. Ensuite, je vais faire le split hotel. Et assurez-vous de l' importer en haut de la page. Enregistrer. Maintenant, allons-y. Nous allons commencer par donner à ce div nom de classe du conteneur d'affichage. Hein ? Nous sommes dans la division. Nous allons avoir un autre div avec le nom de classe top. Et puis, juste à l'intérieur, nous allons avoir une étiquette H1. Et ça, je vais faire le total des recettes. Spécifiez également le nom de la classe. Nous allons créer le titre juste à l'extérieur de ce div avec le nom de classe top. Nous allons avoir une autre division. Donnez-lui le nom de classe du Bhoutan, n'est-ce pas ? Pour placer le div avec le nom de classe en bas, nous allons avoir un autre div avec le nom de classe du graphique en vedette. Juste à l'intérieur, nous devons afficher la barre de progression de React. Et pour ce faire, nous devons d' abord l' importer d'un bout à l'autre. Je vais également importer la progression circulaire par laquelle les enfants de par laquelle les enfants de la barre de progression circulaire de React. Nous devons en importer un autre appelé Build styles. Une fois cela fait, importons également les styles. Donc, ce que je vais faire, c'est revenir à la page Web. Voici en fait les entrées, mais j'utilise la barre de progression circulaire. J'utilise la barre de progression circulaire avec des enfants. Il me suffit donc de copier cette entrée pour les styles. Viens ici, colle, non ? Comme ça. Parfait. Commençons maintenant à utiliser la barre de progression laïque. Alors, dans cette division avec le nom de classe du futur, nous allons afficher la progression circulaire avec des enfants. Ferme-le. Qu'est-ce que l'étiquette à fermeture automatique ? Hein ? Dans les limites de la valeur, il y aura 80. Toutes ces choses. Vous pouvez donc tout aussi bien copier directement depuis la page, mais je veux juste spécifier mes propres informations afin que nous puissions continuer et faire ce que vous voulez. Mais c'est une bonne chose. Suis mon exemple. L'acquéreur du test. D'accord. Nous allons utiliser les dents de chevreuil juste entre les crochets. Alors. Nous allons avoir AT et en dehors de la parenthèse bouclée, je vais spécifier un pourcentage. Donc, cela va montrer les 80 %, n'est-ce pas ? Nous sommes dans la barre du progrès laïque. Inutile, je vais vous montrer en GeV, la largeur du trait. Disons dix styles. Nous devons maintenant utiliser les styles de construction. Couplage, parenthèses fermées, crochets bouclés ouverts et fermés. Je vais faire un trait, une courbe linéaire. Ce sera MAIS t, juste comme ça, tu peux l'appeler mais, mais je ne sais pas comment le prononcer de toute façon. Ensuite, lorsque vous enregistrez, voyons si quelque chose s' affiche sur le navigateur. Et sur le navigateur. OK, c'est donc le pourcentage que j'essayais d'expliquer. Alors voici la barre de progression, voici le titre des recettes de la ville. Allons-y donc pour ajouter les détails nécessaires et lui donner un aspect extrêmement beau. Vs Code. Donc, juste après ce div avec le nom de classe des futurs chats, nous allons avoir une balise P. Donnons-lui un nom de classe ou un titre. Donc toutes ces choses, je pense que vous devez les comprendre. Je n'ai pas besoin d' expliquer quoi que ce soit ici. Vous savez déjà ce qu'est la balise p. Traitement des transactions précédentes. Coma, le dernier paiement n'a peut-être pas été comptabilisé. Ensuite, vous devez fermer la balise p. Le plus simple, c'est vrai, voyons comment cela apparaît sur le navigateur. OK, voici les inquiétudes. Nous allons commencer à styliser ce robuste et vous allez certainement l'adorer. Formatons le code et nous avons maintenant une indentation appropriée. Ici. Nous allons avoir un div avec le nom de classe Summary, n'est-ce pas ? Nous sommes dans cette division, nous allons avoir une autre division. Donnez-lui un nom de classe. Hors article, non ? Nous sommes dans l'objet. Nous avons également une division. Donnez-lui un nom de classe ou le titre de l'élément à afficher. Ici, nous allons avoir un autre div, le nom de classe de l'élément résolu. Donc, juste dans ce div, nous allons afficher quelques icônes qui indiquent réellement le négatif. Alors montez en haut. Bien sûr, vous savez, nous sommes récupérer nos icônes, nous allons importer la flèche du clavier vers bas depuis l'interface utilisateur matérielle. Ici. Juste ici. On va louer, c'est bien. Vous le fermez à l'aide de l'étiquette à fermeture automatique. Maintenant, précisons la taille de l'entreprise. Nous allons avoir un autre div, donnez-lui un nom de classe dont le résultat est 15, 73. OK, bien. Nous allons maintenant copier le div pour le nom de classe de l' élément, puis le dupliquer deux fois. Ce que nous allons faire maintenant, c'est modifier les détails. Ça va être la semaine dernière. Faisons en sorte que nous puissions également les rendre positifs. Parce que c'est positif, la flèche va monter. Nous devons donc revenir aux icônes puis importer le clavier. D'accord, donc là aussi, nous allons le rendre positif, tout comme être positif. Très bien, je vais atteindre la cible ici comme ça. Faisons en sorte que ce soit ce que vous voulez, alors, vous savez que ce n'est qu'un détail temporaire. Donc, ici, je vais faire du clavier. OK, je pense que nous pouvons y aller. Assurez-vous de formater le code avec. Vous voyez maintenant que nous avons les indentations appropriées. Lorsque vous enregistrez et revenez au navigateur. Ici, pouvez-vous voir que l'affichage est prêt ? Mais maintenant, ce n'est pas aussi beau que prévu. Et bien sûr, vous savez, lors de la prochaine conférence, nous allons certainement faire en sorte que ce soit agréable. Rendez-vous lors de la prochaine conférence. 116. Affichage 114 styles: Allons-y pour styliser les composants totaux de l' affichage. Passez au code VS. Ouvrez rapidement ce split hotel dot css. Et s'il vous plaît, avant de continuer, nous devons simplement le lier pour ne pas oublier de le faire à l'avenir. Importez du code CSS à points, barres obliques et points. C'est aussi simple que cela. Comme d'habitude, nous allons délimiter l'écran de cette façon. Hein ? Commençons par afficher le conteneur total. Copie. Viens ici. On va l'ajuster à la marge, non ? 15 pixels Spécifions l'ombre du cadre. Je vais donc simplement copier celui que je vais utiliser ici. Et je vous ai dit que vous pouvez vous lancer sur Internet à la recherche de box-shadow, puis vous serez redirigé vers un site Web où vous pourrez, vous savez, faire des arrêts vous-même. Vous n'avez donc pas à mémoriser ces marges, 20 premiers pixels, le rayon de bordure. Nous voulons que ce soit un peu exagéré. Drift Pixels ferait donc cela. Lorsque vous enregistrez et quittez le navigateur. Magnifique. Il a maintenant pris la forme attendue. Tu vois à quel point c'est juste ? Allons-y donc pour styliser le reste des articles. La ligne terminologique suivante est le haut. Nous allons avoir un écran, Flex. Alignez les éléments, centrez-les. Justifiez le contenu et espacez de manière uniforme. Nous voulons donc que toutes les espèces soient égales. Et c'est à ce moment-là que vous utilisez l'espace de manière uniforme. Je pense que vous savez maintenant que la couleur, bien sûr, vous savez ce qu'est un nombre pair, n'est-ce pas ? Rends-le gris. Sept tickets pour le navigateur. Jette un coup d'œil. Peux-tu voir la perfection ? Western Line est le titre, qui est du tout ce gars-là. Donnons-lui ensuite une taille de police de 15 pixels. Le blé de fonte. Faisons en sorte que ce soit audacieux. OK, allons-y pour voir si nous obtenons les résultats escomptés. Sont. C'est trop petit. Faisons 18 pixels. OK, c'est bon maintenant. Très bien. La ligne suivante est en bas. Laisse-moi te montrer ce gars ici. Le rembourrage. Affichage de 20 pixels, flexion, direction. Nous le voulons donc de haut en bas. Et je vais faire une chronique. Très bien, j'espère que vous comprenez votre Flexbox. Alignez les éléments au centre, justifiez le contenu. Centre. Ensuite, l'écart. Faisons 14 photos. K. Cette composante prend progressivement forme. Vient ensuite le futur graphique. Ce type est là. Quand on en aura fini avec ça, tout devrait bien se passer. Spécifions la largeur. 100 pixels, hauteur, 100 pixels. Bien. Tu peux voir ? Très bien. Continuons. La ligne suivante est le titre. Nous allons faire un certain montant. Laisse-moi te montrer ce gars ici. Alors. Donnez-lui une taille de police de 30 pixels. Nous devons maintenant styliser la description. Font Weeds est de 300. La taille de la police. Pour avoir des photos, la couleur est verte. Alignez le texte, centrez, enregistrez et voyons à quoi ressemble la description maintenant. Ça a l'air bien. Le nid en est le résumé. La largeur. Allons-y à 100 %. Nous allons avoir un écran flexible. Ensuite, alignez les éléments au centre. Justifiez le contenu. Espace entre le consommateur et espace entre les arrêts. Ainsi, lorsque vous consultez l'os du navigateur, vous pouvez voir que tout prend progressivement forme. Passons donc rapidement à l'affichage total. Le suivant est l'article. Et s'il vous plaît, suivez mon exemple sur la façon dont je suis en train de saler le CSS. Cela vous aidera certainement à l'avenir afin que vous n'ayez pas à disperser la classe CSS. Lorsque vous faites cela, il vous faudra du temps pour rechercher une classe en particulier, peut-être lorsque vous souhaiterez redéfinir le style du projet à l'avenir. Mais lorsque vous le faites ainsi, vous pouvez facilement l'obtenir lorsque vous le recherchez. Nous allons tester une ligne vers le centre. Je pense que nous devrions simplement le lancer. D'accord. Vient ensuite les résultats de l'article. Faisons en sorte qu'il affiche Flex. Alignez les éléments. Au centre, la marge en haut, d'accord , à partir du haut, dix pixels suffiront pour cela. Ensuite, la taille de la police. Faisons en 1 pixels. Nous devons styliser le négatif et le positif va le copier. Maintenant, quand c'est positif, nous voulons montrer la couleur verte. Et bien sûr, quand c' est négatif, non ? Nous voulons montrer la couleur rouge. Quand c'est négatif. C'est aussi simple que cela. Foule. Jette un coup d'œil. Tout est bien aligné et c'est extrêmement beau. Ça ne te plaît pas ? J'adore ça. Très bien, nous avons maintenant notre écran total en bon état. C'est éteint maintenant. Et dans la prochaine conférence, nous allons créer les widgets. Rendez-vous lors de la prochaine conférence. 117. Composante de widget d'ordre: Dans cette conférence, nous allons commencer à créer le composant Order We Dad, qui est la dernière table de transactions, rapidement intégré à VS Code et moins de choses se poursuivent. Hein ? Nous sommes dans l'ordre dans lequel nous avons fait le répertoire. Nous allons créer la commande Widget Company. Hé, est-ce que c'est Cliquez avec le bouton droit sur Nouveau fichier. Order le widget point g est une RFC pour générer le composant fonctionnel, créons rapidement le fichier CSS correspondant. Ce que je fais ensuite est de lier mon composant au fichier CSS afin que nous n'oubliions pas à l'avenir la saisie de points, de barres obliques et de points css. Et s'il te plaît, prends des vêtements. C'est en lettres minuscules. Magnifique. Ouvrez rapidement la page d'accueil GAS et nous allons l'afficher en un. Donc, juste après la fin du div de ClassName, le widget d'analyse du chat, nous allons avoir un autre div, lui donner un nom de classe de commande, un widget de membre. Hein ? Dans ce div, nous allons afficher l'OBJ de plus près de la balise à fermeture automatique et, s'il vous plaît faites bien de l'importer en haut. Je ne sais pas si le code est propre, donc je dois juste zoomer. Je pense que c'est trop grand. Très bien, continuons comme ça. Enregistrez aussi rapidement le code avec prettier. Bien. Donc, avant de le consulter sur le navigateur, nous devons styliser ce div avec le nom de classe de la commande et widget membre, home sss point. Et puis ici, nous allons afficher Flex. Donnez-lui une marge de 30 pixels et un os. Lorsque vous enregistrez, consultez le navigateur. Maintenant, en ce qui concerne l'ordre dans lequel nous avons composé, commençons à travailler dessus. Nous en avons terminé avec la maison, alors fermez-la et passez à la commande du widget dot js. Donnons rapidement à ce div le nom de classe de ce conteneur, n'est-ce pas ? Dans le conteneur de commande, nous allons avoir une balise de hachage pour afficher le titre. Alors d'abord, donnons-lui un nom de classe avec un autre titre. Alors je vais faire la dernière transaction. Lorsque vous enregistrez et quittez le navigateur. C'est ici ? Hein ? Nous sommes dans cette division. Nous aurons également une table. Donnez à la table le nom de classe Order Table. Alors c'est bon, nous sommes dans la table. Nous allons avoir le rôle de table, qui est le TR. Donnez-lui un nom de classe de l'ordre dans lequel le cerveau est droit. Tr. Nous allons avoir l'en-tête du tableau. Donnez ici le nom de classe de la commande à cet autre en-tête de table. Ensuite, nous sommes dans le code HTML interne. Nous allons le faire client, d' accord, le surligner et le dupliquer cinq fois. Ici, nous allons le changer en cela. Donc, en gros, nous travaillons simplement sur l'en-tête du tableau. Cours d'amour. Quand nous aurons terminé, je vous le montrerai sur le navigateur. Lorsque vous enregistrez dans le navigateur. Ceux-ci, pouvez-vous voir les données des clients, le produit, la quantité, la localisation ou le statut ? Oups. Les gars, vous devez être grammaticalement des chevaliers du statut de sortie. La prochaine étape consiste donc à créer les données de la table. Très bien, pour que nous puissions sentir la table avec quelques détails. Juste comme ça en avait l'air. Voici l'en-tête du tableau et voici les données du tableau. Bien, nous en sommes à la dernière balise TR. Nous allons avoir un autre T, R. Et ce sera pour les détails du tableau. Donnez-lui un nom de classe d'ordre t, r. Et puis juste à l'intérieur, nous aurons un Td, qui correspond aux données de la table. Donnez le nom de classe de Ou l'utilisateur IMD comme RC car nous voulons afficher l'image du produit. Donc, avant de procéder au pire code, nous devons importer les images de la commande B pour ouvrir l'Explorateur, puis ouvrir le public. Nous devons maintenant minimiser le code VS. Exécutez deux Dash Materials. Nous avons les images que nous allons utiliser dans ce cours. Faites-le glisser et déposez-le là où ils souhaitent probablement l'optimiser. Ouvrez les images. Nous avons ici l'image des membres, qui est l'image que nous allons utiliser pour afficher sur le tableau des membres. Et ici, nous avons le produit IMG, qui correspond aux images du produit, par exemple, nous avons l'écouteur. Je sais que tu comprends ce lit. Ferme-le. Et puis SRC est égal à quatre. Nous devons référencer les images. Produits Slash, écouteurs IMG Slash. écouteur est l'une des images du produit que nous avons sur le placard avec une étiquette à fermeture automatique, et la sortie est l'alternative. Donc, si cette image ne se charge pas, nous allons avoir des problèmes avec Internet. Donc, si cette image n' apparaît pas sur le navigateur, l'alternative, qui est ce gars ici, sera affichée. Et donnons-lui un nom de classe IMG, aussi simple que cela, enregistrez-le et vérifions-le. Ici, il y a des gars parfaits. Tout était propre, mais pas aussi propre que prévu. Je n'ai pas travaillé sur l'image. Maintenant, nous allons travailler sur les autres détails. Ici, nous allons avoir un autre TD. Donnez-lui le nom de classe O'Donnell. Juste après le tag de fermeture du T D, nous allons avoir un autre TD. Donnez-lui un nom de classe d'ordre d. Nous allons donc avoir le 4 janvier 2023. ne s'agit que d'une date imaginaire, vous pouvez donc décider de modifier le titre et de le dupliquer quatre fois. Ancien nom, montant, emplacement ou statut du produit. Supposons donc que ce type commande auprès de l'USC et qu'il ait le statut, au fur mesure que vous dépensez. Nous allons donc maintenant avoir des commandes avec un statut différent. Nous allons donc avoir la possibilité unique de maintenir les dépenses refusée et approuvée. Donc, pour implémenter une telle fonctionnalité, laissez-moi vous le montrer. OK, laisse-moi le faire ici. Je vais effacer les dépenses pour le moment. Ensuite, je vais afficher une fonction appelée navigation, lui donner un type approuvé de plus près avec l'étiquette à fermeture automatique. Et puis, lorsque vous enregistrez et payez dans le navigateur, cela indique que la navigation de plaisance n' est pas définie. C'est ici ? Alors faites défiler l'écran vers le haut à droite, nous sommes dans la composante, nous allons définir l'équipe de gendarmes nautiques. Réglez-le sur notre fonction. Juste dans la fonction, nous allons saisir le texte. Et cette fonction va renvoyer une partie de l'interface utilisateur. Dans ce cas, nous allons prendre un bateau. Donnons au bouton un nom de classe de. Cela sera bouclé. Support Macaulay. Donnons-lui un nom de classe de vote. Hein ? Nous sommes dans le code HTML interne. Nous allons afficher le type comme ceci. Ainsi, nous serons en mesure de spécifier un statut différent pour différentes commandes. Très bien, nous pourrons donc avoir une commande en attente, approuver notre console, c'est sûr. Ils vont apparaître dans différentes couleurs. Par exemple, si la commande est approuvée, nous commercialiserons du vert. Et s'il est refusé ou annulé, nous allons le commercialiser avec du rouge. Et s'il est en attente, nous allons commercialiser le jaune. Cela nous aidera donc à gérer ce problème. Bien entendu, ce n'est pas un problème. Enregistrez et consultez le navigateur. Identifiants. C'est son droit. Tout est apparu comme prévu. Et voici le vote approuvé. La prochaine étape consiste donc à dupliquer le TRO d'un nom de classe d'ordre TRO. Vous allez surligner à partir des lignes 22, des lignes 30. Ensuite, je veux le dupliquer cinq fois. Mais de votre côté, vous pouvez décider de le dupliquer autant de fois que vous le souhaitez. Je ne l'ai pas fait. Maintenant. Je vais simplement modifier les données, mais je ne pense pas que cela soit nécessaire. Je vais donc me concentrer sur le bouton Approuver afin que nous puissions avoir la même commande. Le reste, mais oui. D'accord. Laisse-moi faire quelque chose pour toi. Je ne veux pas que tu t'y perdes. Ici. Nous allons faire référence à la veste et elle est en JPEG. Enregistrez et procédez au paiement dans le navigateur. Tu vois bien que je vais juste porter une veste. Ici. Je vais faire Gucci. Je pense donc que ça aurait dû être un nom de marque, mais c'est cool. Vous pouvez modifier les données. Supposons que ce type commande depuis le Royaume-Uni, alors le statut sera annulé. Par exemple, et cet autre gars, changeons simplement leur statut. Ça va être en attente. Passage à « En attente ». Modifions-le pour annuler. Je veux juste que tu voies comment ça fonctionne. Donc, à la fin, vous pouvez réellement modifier tous ces détails, d' accord, vous pouvez les remplir avec quelque chose de différent. Et nous avons déjà les images du produit, ce qui nous permet alimenter les CROs avec les images d'un choix. Pour moi, d' alimenter les CROs avec les images d'un choix. Pour moi, laissons les choses ainsi afin que la conférence ne soit pas plus longue que cela lorsque vous enregistrerez le projet. Bien. Voici donc ce que nous avons réalisé au cours de cette conférence. Et je peux vous assurer que lors de la prochaine conférence, lorsque nous commencerons à styliser ce composant, vous savez bien sûr déjà à quoi ressemblerait la fin attendue. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 118. Widget d'ordre Styling: Bien, commençons donc à styliser ce composant. Il ne vous reste plus qu'à diviser à nouveau votre écran. Amenez le fichier CSS vers la droite, puis le composant vers la gauche. Nous allons commencer par le conteneur de commandes. Le voici surligné et copié. Viens ici, Dot ou le contenant. Ensuite, le flux va se traduire par une marge de 20 pixels. Donc, si le flux est de deux, cela signifie qu'il faudra deux unités d'écran. L'ombre de la boîte. J'ai déjà le box-shadow que j'utilise. Il me suffit donc de venir ici, de surligner et de copier. Et bien sûr, vous savez déjà comment obtenir le box-shadow. Enregistrez et voyons ce que nous avons. D'accord, bien. Tu peux remarquer quelque chose ? Jette un coup d'œil. Parfait. Le nid est le titre de la commande. Exécuté. La taille est de 20 pixels. La police, marge en blé, n'est-ce pas ? 20 pixels, c'est bien. C'est ici. Stylisez le tableau des commandes. La largeur est de 100 %. Espacement des bordures. 20 pixels Enregistrez et désactivez le navigateur. Bien. Elle prend peu à peu forme. L'utilisateur de la commande. Nous allons avoir un écran flexible, aligner les éléments au centre. Le nid correspond donc à l'ordre T, H, qui est l'en-tête de la table des ordres. Think est au top ici. Testez l'alignement. Alignez le texte vers la gauche. Vous pouvez voir que tout est en bon état maintenant, mais vous ne pourrez pas le remarquer simplement parce que l'image occupe un grand nombre de piques. Ainsi, lorsque nous réduisons la taille de l'image, elle apparaîtra parfaitement bien. La prochaine étape consiste à styliser l'image. Quel est le nom de classe de l'image ? Voici le point ou l'IMG ? La largeur est de cinq pixels. La hauteur aura la même hauteur et la même largeur. Seth ? Tu peux voir ? Maintenant, il semble parfaitement bien, comme prévu. Nous voulons spécifier le rayon de la bordure. Être un peu courbée. Cinq pixels nous y aideront. Lorsque vous consultez le navigateur, vous ne pourrez peut-être pas le remarquer simplement parce que cette image est au format PNG. L'image vous le montre, pouvez-vous le voir ? Les bords sont incurvés. Donc, pour que cela apparaisse bien, je vais spécifier la couleur de la bordure. Nous allons l'avoir d' un pixel, en rouge fixe. Vous pouvez changer le Collado et faire preuve de créativité. Pouvez-vous voir maintenant l' ajustement de l'objet , le centre, la marge, à droite ? Dix pixels, enregistrez. Magnifique. Tu peux voir ? Continuons. La ligne sert à styliser l'ordre des points de navigation. Laisse-moi te montrer ce gars ici. Le rembourrage, cinq pixels. Nous ne voulons pas de frontière, de rayon de bordure. Faisons cinq pixels. Enregistrer le nid et la ligne, c'est appliquer des couleurs en fonction du statut. Nous avons donc approuvé la console en attente. Donc, s'il est approuvé, nous voulons que ce bouton apparaisse en vert. Les risques sont annulés. Nous n'avons pas besoin d'afficher le rouge. Et s'il s'agit de dépenses, nous voulons qu'il prenne une sorte de couleur jaune. Alors faisons-le rapidement. Points. Ce type est là, copier-coller, approuvé par point. Laisse-moi te montrer ici. Est-ce le type de bouton ? Nous allons donc avoir la couleur de fond E5, FA, F2. Et la couleur de la police sera plutôt verte. Oui, enregistrez dans le navigateur, rechargez. Le statut n'est pas appliqué. Que s'est-il passé ? C'est exact. Const bottom. C' est en fait correct. OK les gars, écoutez, il va y avoir un espace ici comme ça. D'accord. Si vous l'avez écrit ainsi, cela ne fonctionnera pas. Il vous suffit donc de l'espacer puis de sauvegarder. Jetons un coup d'œil au navigateur maintenant. Belle, travaillée. Tu vois bien. Appliquons ces serviettes au reste du statut. Donc je vais juste copier ce type comme ça. Ici, collez. Ensuite, nous allons passer à point en attente. Assurez-vous de toujours vérifier si l'orthographe du nom de votre cluster est correcte. C'est exactement pour cela que j'ai divisé l'écran. Nous pouvons donc y jeter un coup d'œil. En attente. Très bien. Ainsi, lorsqu'elle est en attente, la couleur d'arrière-plan sera jaune, 12, 34 ff f, f, et la couleur de police sera de 32 %. Assurez-vous de le terminer, puis de le placer entre parenthèses, puis enregistrer dans le navigateur aussi sûrement que prévu. Enfin, mettons en œuvre les styles pour le conseil nautique à console . Ou vous pouvez voir une baisse à la fin. Il n'y a rien de mal du tout. Je vous ai dit qu'il fallait être créatif de votre côté. D'accord ? Très bien, donnons-lui une couleur de fond. Nous allons également utiliser ce format ici. Cette fois, 35584. Cela nous donnera la couleur athlétique que nous souhaitons. La couleur de police sera D9 57. Enregistrez dans le navigateur. Ce sont ceux-ci, pouvez-vous voir tout apparaît comme prévu. Tu vois, ça a l'air très joli. C'est professionnel. L'application est extrêmement belle. C'est souvent notre n. Dans cette conférence, nous allons commencer par le widget des membres. On se voit alors. 119. Composante de widget membre: Dans cette conférence, nous allons commencer à concevoir les membres que nous avons créés. Voici les techniques ? Le widget des commandes est deux fois plus grand que le widget des membres. Et nous y parvenons en utilisant Flex Two, ce qui signifie que ce gars reçoit deux unités. Donc, en termes d'actrices, c'est deux fois la taille de ce gars ici. Donc, lors de la conférence précédente, j'ai commis une erreur. Je m'attendais à ce que tu corriges cette erreur. Ouvrez donc le CSS d'accueil. C'est censé être flexible. Ensuite, nous devons le plier à deux, ce qui signifie qu'il occupe deux unités de l'écran. Une fois cela fait, fermons-le. Commande B pour ouvrir l'Explorateur. Et bien, dans le répertoire des membres, nous allons créer un nouveau composant appelé membres. We jet point g est un composant générique, le composant fonctionnel. Et bien sûr, nous devons également créer les membres du fichier CSS correspondant (widget point CSS). Très bien, relions rapidement le fichier CSS aux éléments de la barre oblique à points importés. Nous utilisons du CSS à points. Ici, content. Ce sera en lettres minuscules, sauf pour avoir trois éléments maison et rendons les membres. Nous l'avons fait. Donc, juste en dessous des widgets de commande, nous allons afficher les membres. Nous nous rapprochons la balise à fermeture automatique et veillons à toujours l' importer par le haut. Enregistrez et procédez au paiement dans le navigateur. Vous voyez maintenant que nous avons les membres que nous avions ici. Commençons à concevoir le widget pour les membres. Ouvrez les membres de l'e-Jet. Donc, pour l'instant, je vais juste effacer ça. Donnons à ce div un nom de classe de membres. Nous avons utilisé un conteneur, n'est-ce pas ? Au sein de la division. Nous allons avoir un span, lui donner le nom de classe des membres auxquels nous venons de nous connecter. Dans le code HTML interne. Je vais m'occuper des nouveaux membres. Ici, nous allons avoir une étiquette UL, n'est-ce pas ? Nous sommes dans l'URL avec le nom de classe des membres avec au moins des gars. Je voudrais être un peu plus rapide dans cette conférence. Vous n'avez donc qu' à suivre mon rythme. Et en rouge, à l'endroit où se trouve l'étiquette UL, nous aurons une étiquette LI. Donnez-lui un nom de classe, des membres, un élément de liste de widgets. Il suffit de copier, coller et faire un élément de la liste. Nous allons avoir une balise IMG, SRC equal images slash. Permettez-moi donc de vous montrer quelque chose destiné au public. Voici les images et voici le répertoire des membres où nous avons tous les membres, image slash Members slash dc point JPG. Fermez-le, puis égalisez le problème Internet. Bien sûr, vous devez savoir ce qu'est le plein air. Donnez à ce cluster cible IMD le nom de celui-ci sur IMG, plus près avec la balise à fermeture automatique. Voyons ce qui se passe à l'écran. Magnifique. Maintenant, nous allons avoir un div, donnez-lui le nom de classe Users du widget membre. Une chose que je veux que tu imites, c'est façon dont je passe le temps à écrire le nom de ma classe. Je m'assure toujours de l' écrire dans son intégralité pour déterminer l' intention du DVD. Ainsi, lorsqu'un autre développeur récupère mon code, il devient si facile à lire et à comprendre. Donc, dans ce cas, ils n'auront pas de mal à définir les arrêts dans mon code. Je pense que tu comprends. Maintenant. Retro et D, si nous voulons avoir un span, donnez-lui le nom de classe ou le nom d'utilisateur du widget membre. Ils voient à nouveau Dominic Span. Donnez-lui le nom de classe du widget membre. Utilisez un titre. Elle est réactive à zéro, mais elle a raison. Donc, juste à côté de cette division avec le nom de classe des membres que nous recevons, nous allons faire un bateau. Donnez-lui le nom de la classe des membres, les droits de vote sur les widgets étaient inclus dans le bateau. Nous voulons afficher une icône. Donc, ce que je vais faire ici, c'est importer la visibilité depuis l'interface utilisateur du matériel. Nous devons donc afficher ici un cluster de visibilité à la fois de la balise à fermeture automatique et directement à l'intérieur. Nous devons également lui donner un nom de classe pour en devenir membres. Nous avons créé une icône. Et le test va s'afficher. Ça pourrait être beau. Sauvegardons et cochons dans le navigateur. Très bien, voici donc le bateau dans lequel se trouve l'icône. Et quand nous commencerons à le styliser, nous lui donnerons une belle apparence. Il n'est donc pas nécessaire que la ligne suivante soit de la dupliquer autant de fois que vous le souhaitez. Une fois cela fait, vous pouvez également modifier la photo de l'utilisateur, le titre et le reste. OK, donc je vais juste en faire une pour toi et ensuite tu pourras faire le reste. Voici DC Dominic. Je vais le faire ici. Ils voient Victor aussi. Elle est réactive. Et laissez-moi ouvrir les images et voir si je peux obtenir une très belle image. Lady Dot PNG. Donc, ici, je vais créer des graphiques réseau portables PNG Lady Dot. J'espère que vous savez que lorsque vous enregistrez un, vous voyez ce qui se passe. OK, maintenant nous avons cette image ici. Très bien, donc en gros, c'est tout pour le moment et assurez-vous de modifier les images et le titre. n'ai donc pas besoin de le faire dans cette conférence, car si je le fais, la conférence sera trop longue. Il y a une erreur typographique ici que je n'aime pas. Cela devrait donc être écrit. Je n'aime pas faire des erreurs dans mon travail. Je l'aime parfait et soigné. C'est bon. Voilà, c'est tout pour le moment. Et dans la prochaine conférence, nous commencerons à styliser ce composant. On se voit alors. 120. 118 Styler le Widget: Dans cette conférence, nous allons commencer à styliser le composant membres. Parce que pour l'instant, tout semble mal en point. Tout simplement parce que cette image est trop petite. Il occupe une grande partie de l'écran. Commençons donc par l'image. Bien sûr, vous devez savoir comment procéder. Prenez les membres que nous avons créés vers la droite, puis prenez les composants de vos membres vers la gauche. Commençons par l'image. Quel est le nom de classe de l'image ? Img. Le nom de la classe est widget IMG. Copie. Viens ici. La largeur est de 40 pixels, la hauteur de 40 pixels. Nous allons ensuite spécifier le rayon de bordure, 50 %, qui sera la moitié de la largeur et la moitié de la hauteur. Et puis ça va lui donner une boucle circulaire. Lorsque vous enregistrez et cochez dans le navigateur. Et vous voyez maintenant que les choses prennent progressivement forme. OK, faisons en sorte que ce soit des flux d'objets. Terminé. Nous pouvons maintenant commencer à styliser le reste de la classe. Donc, voici d'abord les membres que nous avons regroupés. Je t'en prie, fais en sorte qu'il soit en haut. Le flux va être le même. Cela va donc prendre une unité de l'ensemble de cette portion. Et bien sûr, vous savez, cela prend deux unités, donc c'est deux fois plus que cela, et puis celle-ci deviendra une unité. Je l'explique simplement pour que le monde le comprenne suffisamment bien. Lorsque vous enregistrez et vérifiez que le navigateur peut voir une belle marge intérieure. Le rembourrage sera de dix pixels. Marge gauche. Faisons 20 pixels. Vous enregistrez et payez dans le navigateur. Bien. La prochaine ligne de mandat concerne donc les membres, nous mourons simplement chez nous. Désolé, nous allons le faire ici. La taille de la police, 20 pixels, la largeur de la police, faisons en sorte qu'elle en affiche 100. Et bien sûr, nous devons spécifier l'ombre de la boîte de ce conteneur. Je vous ai dit que j'avais une ombre à costumes que j'utilise pour mon projet. Alors, c'est ici. Très bien, bien. Le nid est composé des membres avec au moins une marge égale à zéro. Rembourrage. Le style de liste. Je suis sûr que vous connaissez le style de la liste. Vous voyez ce point ici. Je ne sais pas si vous pouvez voir clairement ces points, ces points, tous ces points qui indiquent les éléments de cette liste. Nous voulons donc le supprimer et nous le ferons lorsque vous l' enregistrerez et que vous le paierez dans le navigateur. Zoomez un peu. Tu vois qu'il n'est plus là ? Ce qui est Nest, je pense, ce sont les membres qui ont au moins un objet. Nous allons avoir un affichage flexible, aligner les éléments au centre, justifier le contenu, espacer les éléments. Nous allons donc faire de l'espace entre les sauvegardes. Vous pouvez donc voir la différence. Tu peux voir ? Nous l'avons donc fait fléchir , puis nous avons créé cet espace intermédiaire. Ainsi, lorsque vous supprimez les flocons et que vous enregistrez le projet, voyez où vous allez vous retrouver. Maintenant, je pense que vous comprenez également l'utilité du flux, lorsque vous supprimez l'espace entre les deux, laissez-moi vous montrer ce qui est bon. Je vous les montre. Voyez-vous maintenant que tout est regroupé ? Jette un coup d'œil. Vous voyez que maintenant, lorsque vous reprenez ce qui justifie la présence d'un espace entre les deux, cela va créer de l'espace entre les deux. Toutes ces épreuves. Je pense que je fais de mon mieux pour que vous compreniez le CSS malgré Si nous faisons React, marge de gauche à droite est pleine de pixels. La partie inférieure est de 20 pixels. Magnifique. Très bien, nous en avons presque fini avec le style. Le nid est réservé aux membres de cet utilisateur. Faisons en sorte qu'il affiche la flexion, la direction de la flexion. Nous le voulons de haut en bas. Je vais donc faire du colon. Vous voyez maintenant que nous avons le nom, puis le titre du poste. Donc, autrefois, ils étaient tous écrits sur la même ligne. Permettez-moi de vous montrer quand je retire la direction de flexion pour devenir colonne. Vous voyez maintenant le « je » dans la même ligne ? Et puis, quand je fléchis la direction pour devenir une colonne, elle commence de haut en bas. Jette un coup d'œil. Les membres sont les suivants. Nous obtenons un nom d'utilisateur. Il suffit de spécifier la police « blé ». Faisons en sorte qu'il en voie 100. Les membres, nous avons utilisé un titre. La police du tweet est 300. Le nid est donc le bouton du widget pour les membres. Ce bouton est là. Nous voulons faire en sorte que cela ressemble à de belles boucles où, une minute , écoutez, les gars, avant de continuer je dois couper cette image, la transformer en x. Nous devons la placer juste après les membres qui ont au moins un élément ici. Comme ça. J'essaie de régler le problème. C'est donc, bien sûr, que je vous l'ai dit à plusieurs reprises. Le nid est donc le widget de vote des membres. Membres, nous avons fait du canotage. Faisons en sorte qu'il affiche Flex. Alignons les éléments. Centre. La frontière. Nous ne voulons pas du tout de bordure autour du corps. Mais nous voulons spécifier le rayon de la bordure afin qu'il soit un peu incurvé. D est dix pixels, marge intérieure, sept pixels, dix pixels ici. La couleur d'arrière-plan et la couleur de police seront donc grises. Le pointeur du curseur. Enfin, nous allons styliser le membre. Nous avons créé une icône, qui est cette icône qui apparaît juste à l'intérieur du corps. La taille de police est exprimée en pixels système. Marge-droite. Cinq pixels. Quand tu économises. Et voyons le résultat final. Vous voyez que tout semble parfaitement normal comme prévu ? Nous en avons donc terminé avec la page d'accueil. Et c'est sûr, c'est extrêmement beau. C'est de premier ordre. J'adore ça. Bon, c' est tout pour le moment. Dans la prochaine conférence, nous commencerons à définir nos itinéraires. Ainsi, lorsque vous cliquez sur l'utilisateur, cela devrait vous amener aux États-Unis en tant qu'entreprise. Lorsque vous cliquez sur les produits, vous accédez également à la page du produit ou à l'élément des trois produits. D'accord. Donc, si vous voulez changer le nom et le titre de ce contenu ici, vous pouvez le faire de votre côté. Pour l'instant. Pourriture. 121. 119 mettre en œuvre les itinéraires: Dans un scénario réel, une application comme celle-ci devrait être capable de vous rediriger vers un autre composant lorsque le lien est clivé, n'est-ce pas ? Quelle est la navigation latérale lorsque nous cliquons sur Utilisations, l'application devrait également être capable de lire les annuaires pour les réutiliser en tant que page. Lorsque nous cliquons sur des produits, cela devrait pouvoir nous rediriger vers la page du produit. Pour implémenter de telles fonctionnalités, nous devons donc utiliser une bibliothèque externe appelée React Router. Ne vous rendez pas rapidement sur react router.com. Et ici, nous avons la documentation. Et bien sûr, pendant votre temps libre, vous pouvez décider de lire la documentation afin de bien comprendre le routeur React. Allons-y rapidement. Accédez à VS Code. Pour continuer. Tout d'abord, nous devons installer le routeur React, non ? Nous sommes dans le terminal. Je vais utiliser Control C pour arrêter le neurone actuel sur le serveur et écrire dans le répertoire du client. Je vais faire le gestionnaire de packages Node, installer, React, Dash, Router, Dash Dome. Le plus simple est d'appuyer sur la touche Entrée pour le faire démarrer. L'installation est en cours. Le dôme du routeur React a été installé, avec succès. Permettez-moi de vous montrer rapidement la commande P , puis de rechercher le fichier package.json. Et la voici en ligne, la cystéine. Ferme-le. La ligne de terme suivante consiste à créer les composants que nous voulons rediriger pour apprendre que le lien est cliqué. Ouvrez donc les pages des composants. Et puis, juste au moment où les États-Unis, nous allons au moins créer un nouveau composant appelé liste d'utilisateurs point j pour générer les composants fonctionnels. Créons rapidement le fichier CSS correspondant. Bien. Fermez l'Explorateur. Ouvrez l'application. G est parfait. La prochaine étape consiste donc à importer un routeur de navigateur, des itinéraires, des itinéraires depuis React, un routeur, une dune, des sables bidon, n'est-ce pas ? Laisse-moi te montrer. Nous allons importer un routeur de navigateur. Des itinéraires, des itinéraires plus calmes depuis React, un routeur, un tableau de bord, ne le faites pas. C'est aussi simple que cela. Je n'ai pas importé tous ces trucs difficiles depuis Reactor, c'est d' emballer l'ensemble de l'application avec un routeur de navigateur. Il suffit donc d'effacer ce div avec le nom de classe de l'application. Ce n'est absolument pas nécessaire. Très bien, l'application se plaint simplement parce que l'élément GSS doit être encapsulé dans un nœud parent. Et maintenant, le nœud parent va être le routeur du navigateur. Points forts. Maintenez la touche Option de votre clavier enfoncée. Appuyez sur la flèche vers le haut pour la déplacer. Si cette option ne fonctionne pas pour vous, il vous suffit de sélectionner la commande X pour la couper puis de la coller dans le routeur du navigateur. C'est aussi simple que cela. Implémentons rapidement les itinéraires. Viens ici. Je vais faire des itinéraires qui comprennent l'ensemble des itinéraires que nous allons suivre dans ce cours. Nous sommes donc dans des présentoirs. Nous allons avoir nos itinéraires individuels. Ensuite, je vais faire des itinéraires, spécifier le chemin et le chemin. Il suffit d'indiquer une barre oblique. Il s'agit donc d'un pointeur vers le composant d'accueil. Une fois cela fait, nous devons en fait spécifier la composante préoccupante. Ensuite, je vais acquérir des éléments, attraper ce type ici et les coller ici. Assurez-vous de supprimer l'espace entre les deux. Juste comme ça, tout est cool. Nous voulons également créer un itinéraire vers la page de liste ou le composant de l'utilisateur, pour ainsi dire. Nous allons donc avoir un itinéraire jusqu'ici, non ? Nous sommes en route. Spécifions ce qui précède. Ce sera une liste d'utilisateurs à barres obliques. Ensuite, nous allons spécifier les éléments. Dans ce cas, les éléments se réfèrent aux composants concernés. Et maintenant, nous allons avoir. Du moins pour l'utilisateur, de plus près grâce à l'étiquette à fermeture automatique. Et assurez-vous de l'importer en haut. En ce qui concerne le format, le code le plus joli semble propre. Maintenant, nous allons le tester. Points forts. Je vais tout copier directement entre guillemets et dans le navigateur. Nous allons donc avoir au moins 3 000 utilisateurs de slash sur localhost. Lorsque vous appuyez sur la touche Entrée. Il dit que ce côté n'est pas accessible d'une manière ou d'une autre. C'est simplement parce que nous devons à nouveau redémarrer le serveur. Viens ici. Très bien, nous sommes dans le terminal intégré VSCode. Assurez-vous que vous vous trouvez dans le répertoire client. Ensuite, je vais faire Node Package Manager, démarrer le serveur comme ça. Et sous navigateur. Vous voyez maintenant que nous avons la page de l' utilisateur. Magnifique. Cependant, ils fonctionnaient comme prévu. Mais pour l'instant, lorsque vous cliquez sur Utilisateurs, rien ne se passe. Mettons-le rapidement en œuvre. Revenons à VS Code. Ouvrez le fichier Node.js en haut, faites défiler la page vers le bas. OK, donc c'est la maison juste ici. Nous devons terminer cet élément de la liste, non ? Nous sommes dans le lien. Nous allons donc spécifier le lien ici. Et je vais le faire ici, lien vers la page d'accueil. Donc, spécifiez la barre oblique qui sert de pointeur vers la page d'accueil. Par défaut, c'est ainsi que nous définissons la page d'accueil. Puis des points forts. Déplacez-le à nouveau directement dans le lien. OK, voici l'utilisateur. Spécifiez le lien. Euh, assurez-vous d'importer le lien depuis le routeur React en le faisant, est-ce juste ici ? OK, donc ici nous allons faire un lien vers. Nous devons donc spécifier l'itinéraire qui nous mènera à la page de l'utilisateur. Bien sûr, nous l'avons déjà fait. Il suffit donc de revenir à app.js puis de le copier comme ceci. Assurez-vous que c'est exactement la même chose avec ce que vous ciblez ici. Collez-le comme ceci, puis surlignez l'élément de la liste. Déplacez-le directement dans le lien. Formatons le code avec prettier. Ça a l'air bien. Très bien, enregistrez le projet dans le navigateur. Ainsi, lorsque je clique sur Accueil, j' épuise la page d'accueil, lorsque je clique sur Utilisateurs, cela nous ramène à la réutilisation ou à la rapidité, ou vous l'utilisez comme composant, pour ainsi dire. L'application fonctionne donc parfaitement comme prévu. Dans la prochaine conférence, nous allons commencer à implémenter la page de l'utilisateur. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. 122. Table de liste d'utilisateurs: Dans cette conférence, nous allons implémenter le composant de liste des utilisateurs. En gros, nous allons avoir un tableau présentant les détails de l'utilisateur et ses paiements. Cette fonctionnalité sera donc implémentée avec la table de données Material UI. Je suis rapidement allé sur MU i.com et j'ai cherché une table. Ici, est-ce mei.com ? Hein ? Un dans le champ de recherche. Et nous allons nous mettre à table ici même. Nous avons plusieurs tables qui peuvent être utilisées pour créer plusieurs applications. Nous avons ici le tableau de base, les données du tableau. Nous avons la table dense, et bien d'autres encore. Alors, non ? Dans ce cours, nous utiliserons les données du tableau. Vous avez donc la possibilité de cocher un utilisateur individuel, de sélectionner également tous les utilisateurs. Vous pouvez trier les articles ici. Nous pouvons décider de trier les objets non recherchés par ordre décroissant. Vous pouvez filtrer, masquer ou afficher les coulombs. Ce tableau est donc en fait le meilleur pour l'application que nous sommes en train de créer. Profitons donc de ce tableau. Faites défiler vers le bas. Juste ici. Vous allez voir cette icône de tag. Cliquez pour ouvrir le code. Pour implémenter cette table. Tout d'abord, nous devons installer cette bibliothèque. Surlignez tout entre guillemets simples, puis copiez. Revenez à VS Code, ouvrez le terminal intégré, n'est-ce pas ? Nous l'avons déjà ouvert. Je vais donc simplement arrêter le serveur en cours d'exécution. Ensuite, je vais utiliser la commande npm install V pour coller ce que nous avons copié depuis le site Web MUL, appuyer sur la touche Entrée pour le lancer. Ainsi, nous pourrons utiliser la table de données installée avec succès. Donc, ici, nous avons les colonnes et les colonnes seront enregistrées en tant qu'en-tête du tableau, n'est-ce pas ? Cela va nous faire économiser une maturité, vous pouvez le voir comme le prénom, le nom de famille, l'âge, le nom complet. La colonne ci-dessous en est donc responsable. Ensuite, nous avons la ligne et la ligne va être enregistrée en tant que données qui seront utilisées pour remplir le tableau. Et lorsque vous observez attentivement le tableau, vous vous rendrez certainement compte que c'est vrai. OK, donc nous avons LastName qui doit être snow. Le prénom est John, puis 35 ans. Viens ici. N'oubliez pas que nous avons réglé cette alarme. OK, nous avons donc John Snow comme nom de famille. Le prénom est John, le nom de famille est Snow. L'âge est de 35 ans. Donc, toutes ces informations ici, nous allons les enregistrer sous forme de données pour remplir le tableau. Juste ici. Nous allons afficher la grille de données. Nous allons établir des règles qui seront des rangées, et c'est ce type. Ensuite, nous allons définir les colonnes comme des colonnes. Ce type est là. Et puis nous avons ici des lignes par option de pitch. Ici, il est réglé à cinq. Alors c'est pourquoi vous allez avoir 12345. Il va donc apparaître cinq dans cette table. Mais vous pouvez décider d'augmenter l'option de marionnette ROS à la valeur de votre choix. Et voici la sélection de cases à cocher. C'est aussi simple que cela. Faisons donc en sorte que cela soit implémenté directement dans notre application. Revenez au code VS. Je vais les surligner, les effacer. Donnons un nom de classe à ce div. Et le nom de la classe sera liste d'utilisateurs. Donc, juste au moment du div, nous allons afficher la grille de données. Mais pour l'instant, il suffit de copier la colonne Highlight Command C pour copier, venir ici et de coller, puis de revenir en arrière. Nous devons copier cette impulsion. Alors surlignez-les, essuyez-les également. Nous n'avons pas besoin de surligner les lignes 21 à 22 pour les effacer. Bien. Revenez en arrière. Copions les lignes. Enfin, nous devons copier les données, d'accord ? vaut mieux le coller ici. Bien, stylisons rapidement ce nom de classe. Copie. Viens ici. Je vais faire une liste d'utilisateurs par points, et nous allons faire preuve de flexibilité. Faisons-en quatre et voyons ce que nous avons à bord. Ouvrez le terminal , puis nous devrons démarrer le projet. Cela fait, établissons rapidement un lien. Composant avec le fichier CSS. Donc, ici, je vais faire une barre oblique, moins de points pour l'utilisateur, du CSS, enregistrer et vérifier le navigateur. Les cartes d'identité. Tu peux voir ça ? Belle ? Essayons-le. Je vérifie cet article et il est sélectionné. Quand j'ai cherché. Cela fonctionne parfaitement bien. Tu vois ça ? Écoutez, mes amis, c'est fantastique. Nous pouvons trier par ordre croissant. Vous voyez, vous pouvez filtrer. Pouvez-vous voir par nom, nom de famille, âge ou nom complet ? Tu peux faire beaucoup de choses ici. Tout va bien. La prochaine étape consiste à remplir le tableau avec nos données. Parce que ces données ne sont pas pertinentes pour l'application que nous développons. Revenez au code VS. Nous allons laisser l'identifiant, puis la querelle pour le prénom, nous allons le changer en nom d'utilisateur. Ici. Nous allons également le modifier pour utiliser un nom, lui donner une largeur de 200. Et cela sera remplacé par e-mail, et voici un e-mail. OK, faisons 200, ce qui correspond à la largeur. Et voici le terrain idéal pour cette époque. Changeons l'avantage en statut. Statut. Statut. Effacons le numéro. La largeur est de 90. Et voici le champ pour le nom complet. Nous allons modifier ces deux éléments. Paiement. Supprimez la description. Également triable. Nous allons l'effacer. Ensuite, la largeur. Une fois que ce T est suffisant. Très bien. Tout est cool, j'adore ça. Alors imbriquez un autre champ supplémentaire. Je dois juste le surligner, le dupliquer. Je vais passer à l'action une fois que ce T sera suffisant. Bien. fois cela fait, lorsque vous enregistrez et payez dans le navigateur, vous voyez maintenant que nous avons l' en-tête contenant le nom d'utilisateur, e-mail, le statut, le paiement et l'action. Implémentons donc l'utilisation en tant que règle, qui enregistrera sous forme de données pour remplir le tableau. Je vais donc simplement souligner les lignes 32 à 39. Essuyez-le. L'idée en est une. Nous allons supprimer le nom de famille, et ce sera le nom d'utilisateur. Assurez-vous qu'il en va de même pour le coelome. Donc, le nom d'utilisateur que je vais faire est Victor Dominic. Nous allons donc inclure ici l'avatar. Et l' avatar sera là. Je vais juste copier l'URL de l'image, mais je veux l'utiliser, et bien sûr, il ne s'agit que d'une image aléatoire que j'ai obtenue sur Internet. OK, effaçons ça. Ici. Nous allons recevoir un e-mail. Et le statut de l'e-mail sera de plus en plus calme. Le paiement. C'est tout. Formatons le code avec prettier. Et lorsque vous formatez le code, il ressemblera exactement à ceci. Donc, ce que je vais faire maintenant, c'est le surligner puis le dupliquer autant de fois que vous le souhaitez. Donc, ici, vous devriez procéder à la modification du nom d'utilisateur, l'identifiant et du reste des détails. Mais pour moi, je veux juste changer d'identifiant d'accord ? Le nom d'utilisateur ici pourrait donc être Dominic Daisy. L'avatar peut être n'importe quelle image prise au hasard sur Internet. L'e-mail, vous pouvez le remplacer par autre chose. Vous pouvez les activer ou les désactiver. Vous pouvez spécifier un montant différent ici. Ainsi, lorsque vous enregistrez et consultez le navigateur, les identifiants, vous pouvez voir que tout semble fonctionner parfaitement. Mais lorsque vous observerez l'écran, vous vous rendrez compte que l' action ici est vide, alors vous craignez que cela ne soit fait à l'avenir. Donc, ici, nous allons avoir un bouton pour modifier, un bouton pour supprimer. Nous y allons très bientôt. Très bien, c'est tout pour le moment. Et dans la prochaine conférence, nous allons refactoriser le code. Donc, en refactorisant le code, je veux simplement dire que nous allons avoir les données dans un module séparé. Le code a l'air un peu moche parce que nous avons les détails ici, et ce n'est pas agréable du tout. Dans la prochaine conférence, nous allons séparer les données dans un module différent. Rendez-vous lors de la prochaine conférence. 123. 121 Refactoring: Dans cette conférence, nous allons refactoriser le code. Par refactorisation, je veux simplement dire que nous allons séparer les données des composants de l'interface utilisateur. Passez donc rapidement à VS Code. Et laissez-moi vous montrer comment ouvrir l'Explorateur. Et c'est vrai, la SRC ne le ferait pas. Nous allons créer un nouveau package appelé fichier de données, n'est-ce pas ? Nous sommes dans le fichier de données. Nous allons créer un nouveau fichier appelé données utilisateur. Le point j se trouve ici. Nous allons avoir les données des utilisateurs. Je vais donc faire une const ponctuelle, l'utiliser comme données, le définir comme un tableau vide et l'ouvrir. Bon, nous sommes dans ce tableau, nous allons coller les lignes. Donc Heron à utiliser comme liste. Laissez-moi vous montrer ici les rangées. Je vais donc surligner les lignes 208290, les couper. Il suffit d' effacer cette héroïne pour utiliser ces données. Je vais juste coller ceci aussi simple que cela. Maintenant, passons à l' utilisation d'un minimum de bêtises. Nous allons importer les données des utilisateurs à partir des données utilisateur du fichier de données Slash. Donc, ici, les lignes seront égales aux données des utilisateurs. Lorsque vous enregistrez et que vous procédez au paiement dans le navigateur. Ici, tout fonctionne parfaitement comme prévu. C'est tout pour le moment. Et dans la prochaine conférence, nous verrons comment ajouter des données personnalisées. On se voit alors. 124. 122 Ajout de données personnalisées: Dans cette conférence, nous allons personnaliser le tableau. Très bien, nous allons donc voir comment ajouter notre propre article personnalisé, n'est-ce pas ? Nous sommes dans la table. Alors rapidement, laissez-moi vous montrer comment faire cela avec VS Code. Donc, ici, je vais me calmer. Nous allons ajouter nos champs et données personnalisés. Ensuite, nous pourrons le faire avec la méthode de rendu des cellules. La méthode de rendu vous permet de renvoyer un nœud React au lieu d'une chaîne. Donc, ici, je vais ouvrir et fermer des parenthèses de colonnes de cellules aléatoires. Et nous allons prendre un paramètre. Paramètres, définissez-les selon notre fonction et nos droits, nous allons renvoyer un élément de réaction, qui dans ce cas div, avec le nom de classe de l'utilisateur, n'est-ce pas ? Nous sommes dans cette division, nous allons avoir une image. Maintenant. L'image sera égale à l'image d'avatar params point rho point, montrez-vous la commande P, puis de front pour utiliser nos données, le point g est, donc voici l'avatar. Bien, nous voulons donc récupérer cette image et l'afficher avec le tableau, c'est aussi simple que cela. Viens ici. Sinon, nous allons établir une connexion Internet. Plus près avec l' étiquette à fermeture automatique, juste à l'intérieur. Nous allons faire params point rho point username seven, passer à la caisse. Le navigateur. L'idée est que vous pouvez voir que l' image est extrêmement grande et qu'elle ne peut donc pas apparaître correctement. Stylisons rapidement l' image pour qu'elle paraisse nette. Hein ? Nous sommes dans la liste des utilisateurs. OK, laisse-moi te montrer. Il ne nous reste donc plus qu'à copier le nom de la classe AMD. Oups, je pense que nous devons donner le nom de la classe. Oui, faisons-le rapidement. Donnez le nom de classe de l'utilisateur IMG, surlignez et copiez. Viens ici. Utilisateur Dot IMG. Donnons-lui une largeur de 40 pixels, hauteur de 40 pixels, puis un rayon de bordure. Ce sera 50  %. Margin, non ? Neuf pixels. L'objet s'adapte. Faisons en sorte que ce soit sûr. Vous voyez maintenant que nous avons le profil, le nid et la chaux doivent travailler sur l'action. Donc, juste en dessous de cette action, nous voulons avoir un bouton d'édition et un bouton de suppression. Ainsi, lorsque nous cliquons sur le bouton Modifier, nous allons utiliser notre page de profil où nous pourrons également modifier et mettre à jour les utilisateurs. Lorsque nous cliquons sur le bouton Supprimer, cela supprime un élément spécifique, à droite, à placer dans le tableau. Si vous choisissez de supprimer ce gars, il sera supprimé. D'accord. Nous allons supprimer l'article en fonction de leur identifiant, l'héroïne au code VS. Et mettons en œuvre les actions. Nous allons faire exactement la même chose. Donc, ici, bien sûr, nous voulons renvoyer un nœud. Nous allons donc utiliser la méthode de la cellule de rendu. Prend en compte un paramètre. Alors ici, nous pouvons maintenant renvoyer un élément de réaction. Nous allons donc avoir un div, ce div étant le nom de classe d'un conteneur d' action, n'est-ce pas ? Nous sommes dans cette division, nous allons faire un bateau, lui donner un nom de classe d'utilisateur. Donc, directement dans le code HTML interne, nous allons effectuer des modifications. Et ici, nous allons avoir le bouton Supprimer. Mais dans ce cas, nous allons utiliser l'icône de suppression parmi les icônes en haut. Et ici, nous allons importer, supprimer, surligner. De la part de ce type. Nous allons donc avoir la ligne d'art Supprimer la suppression de la balise à fermeture automatique. Donnons-lui au moins le nom de classe delete, save, à moins qu'on ne l' appelle navigateur. Vous pouvez voir que nous avons maintenant le bouton Modifier et supprimer le vote. Cela n'a pas l'air aussi beau que prévu. Alors stylisons-le rapidement et donnons-lui une meilleure apparence. Utilisez tout ce CSS. L'utilisateur de Dod Edit doit vérifier si l' orthographe est correcte. D'accord. Pour moi, pouvez-vous voir maintenant ici c'est écrit en cas de karma et ici. C'est exactement pour cela que j' aime diviser l'écran. Agréable. Faisons en sorte que la frontière soit connue. On ne s'en préoccupe pas vraiment. Donc, le rayon de la bordure. Faisons cinq pixels. Rembourrage. Cinq pixels, dix pixels. Couleur de fond Faisons en sorte qu'il soit bleu plus foncé. Et la couleur de police sera blanche. Marge, n'est-ce pas ? La marge droite est de 20 pixels. Lorsque vous enregistrez dans le navigateur. Vous voyez maintenant que le bouton est magnifique. Dialysons l'icône de suppression. Ici. Nous allons avoir des points. Permettez-moi de le copier directement depuis cet endroit pour ne pas nous tromper. La couleur sera le rouge et la cause. Faisons en sorte qu'elle soit en sécurité. Maintenant, tout semble classique. Je les adore. Très bien, il y a quelque chose dont je veux que tu prennes note. Mon cou. Cliquez sur n'importe quelle partie du tableau, elle est sélectionnée. Vous voyez qu'il faut être précis. Donc, lorsque je recharge la page, nous voulons que ce jeu ne soit sélectionné que lorsque l'utilisateur clique dessus, comme ceci. D'accord ? Nous ne voulons donc pas que ce genre de choses se produise. Ce n'est pas bon du tout. Revenons donc au code VS, puis utilisons-le comme liste. Faites défiler vers le bas. Juste ici. Nous désactiverions la sélection sur onclick. Rechargez. D'accord. Maintenant, vous pouvez voir que lorsque je clique ici, cela n'affecte pas la boîte de discussion. La seule façon de sélectionner un article est donc de le vérifier directement. Comprenez-vous la nécessité d'être précis ? La ligne Vanessa consiste à implémenter la fonctionnalité de suppression. Je pense donc que nous pouvons le faire lors de la prochaine conférence. On se voit alors. 125. 123 supprimer le bouton: Dans cette conférence, nous allons implémenter le bouton Supprimer. Ainsi, lorsque l'utilisateur clique sur le bouton Supprimer en bas, nous devrions être en mesure de supprimer un élément spécifique du tableau. D'accord, mettons-le rapidement en œuvre. Je n'ai pas utilisé VS Code. Tout en haut. Nous allons déclarer la variable d'état nécessaire à utiliser. Ici, je vais faire const, data, set data. L'état initial sera donc celui des données de l'utilisateur. Et assurez-vous de l'importer d'occasion en haut. Ici. C'est difficile, non ? Nous définissons maintenant l'état initial à utiliser en tant que données, c'est-à-dire les données qui peuvent être correctement intégrées au fichier de données. Nest consiste à définir la fonction. Nous allons avoir ici. Const cent clics, égal, réglez-le sur votre fonction. Et puis, directement dans la fonction, nous allons définir les données en points de données à quelques reprises. Nous devons donc parcourir le tableau et supprimer un élément spécifique en fonction de son identifiant. Oui, alors allons-y. Ici. Nous allons prendre un article et je vais procéder à l'identification par points de l'article. Nous allons spécifier le clic, à droite, dans le plan de suppression. Nous allons spécifier le onclick. Maintenant. Nous allons appeler le pseudo. Cliquez ici. En fait, c'est bien. Nous modifions cette fonction pour gérer les suppressions. Très bien, ce nom est donc tout à fait pertinent par rapport à l'objectif pour lequel le bouton a été créé. Ici, 200 supprimez. Juste comme ça. Ensuite, nous allons prendre en compte les paramètres point rho point id. Donc, juste sur la ligne, nous devons prendre en compte les données, c' est-à-dire ce type juste ici. Ce gars ici détient l'état initial et l'état initial s'avère être utilisé comme données. C'est aussi simple que cela. ne nous reste donc plus qu' à accéder au tableau et supprimer un élément spécifique en fonction de son identifiant. Et après cela, nous devons également mettre à jour le tableau, enregistrer sur le navigateur. Très bien, il est dit que l'identifiant n'est pas défini. Ici. OK, passons à notre code. Fais des bêtises, laisse-moi te montrer. Très bien, nous devons donc prendre un identifiant ici comme paramètre sécurisé sur le poème du navigateur. Essayons-le en cliquant sur le bouton Supprimer. Vous n'avez donc qu'à garder un œil là-dessus. Je souhaite supprimer cet élément dont l'identifiant est cinq. D'accord ? Vous voyez, l' idée d'en avoir cinq a disparu. Maintenant, permettez-moi de supprimer l' élément avec l'identifiant de deux. Tu vois qu'il a disparu. Quand nous continuons à supprimer. Pouvez-vous voir que tout fonctionne parfaitement comme prévu. Mais lorsque vous rechargerez la page, nous aurons les éléments. Mais tu sais pourquoi ? C'est simplement parce que nous ne l'entreposons pas quelque part. Alors ne vous inquiétez pas, ce n' est pas grave. Très bien, la prochaine étape consiste à implémenter le bouton Modifier. Lorsque nous cliquons sur le bouton Modifier, nous souhaitons transmettre l'identifiant et les informations de l'utilisateur sur une nouvelle page. Laisse-moi te montrer rapidement. Permettez-moi de formater le code. Il s'agit du bouton d'édition. Hein ? Maintenant. Je dois juste préciser la dame, mettre en évidence le bateau et le déplacer. Nous devons donc créer un lien vers une barre oblique, barre oblique utilisateur, comme ceci. Ensuite, params point rho point ID. Très bien, nous passons maintenant l'identifiant dans une nouvelle page. Sauvegardons et voyons ce que nous avons sur le navigateur. Le lien n'est pas défini, d' accord, importons-le rapidement. Importe le lien depuis le routeur React pour l'enregistrer sur le navigateur. Essayons-le. Tu vois ça ? Maintenant, lorsque vous observez la baignoire, vous allez voir un objet portant l'identifiant de l'une d'entre elles. Laisse-moi te le montrer encore une fois. Je vais cliquer sur cet élément avec l'identifiant de cinq. Tu peux voir ici ? Nous avons maintenant un objet avec l'identifiant de cinq. C'est tout pour le moment. Et dans la prochaine conférence, nous commencerons à créer le profil de l'utilisateur, qui est la vitesse de l'utilisateur. On se voit alors. 126. 124 Profil utilisateur: Dans la conférence précédente, nous avons implémenté le minimum utilisateur. Très bien, maintenant, lorsque je clique sur le bouton Modifier, cela va transmettre l'inflammation avec l' idée d'une nouvelle page. Vous pouvez voir ici que nous avons l'identifiant de l'un d'entre eux. Et nous voici sur une nouvelle page. Revenez en arrière. Lorsque je clique sur le bouton Modifier de l'utilisateur avec l'identifiant de cinq, je transmets l'identifiant à une nouvelle page ainsi que les détails de l'individu. Tu peux voir ça ? C'est donc ce que nous allons mettre en œuvre dans cette conférence. Par ici. Il se peut que vous ne voyiez rien à l'écran. Allons-y donc pour commencer à le mettre en œuvre rapidement. Passez au code VS. La première chose que nous allons faire est de mettre en œuvre l'itinéraire. Ouvrez l'application Js. Juste ici. Nous allons avoir l' itinéraire, spécifier le chemin. Alors ça va ressembler à ça. Barre oblique, barre oblique des utilisateurs, colonne, puis ID utilisateur. Maintenant, les éléments seront les composants réels vers lesquels nous voulons rediriger. Dans ce cas, ce sera le profil de l'utilisateur. Assurez-vous de l' importer en haut de la page. C'est aussi simple que cela. Enregistrer. Et maintenant, continuons à utiliser notre profil. Lions rapidement le fichier CSS au composant. Essuie ça. Donnons à ce div le nom de classe du conteneur supérieur du profil. Donc, juste dans ce div, nous allons avoir un autre div avec le nom de classe du conteneur de titres de profil, juste à l'intérieur. Nous allons avoir une balise head one, lui donner un nom de classe ou un titre de profil. Maintenant, nous allons faire du canotage. Donnez-lui un nom de classe ou de profil, ajoutez des droits de vote dans le code HTML interne que je vais créer pour créer un utilisateur. D'accord ? Donc, juste après le div de fermeture avec le nom de classe du conteneur profile tidal, nous allons avoir un autre div, lui donner le nom de classe du conteneur de profil. Et puis un div avec le nom de classe Professional, non ? Dans le div avec le nom de classe du profil. Bien sûr. Nous allons avoir un autre div avec le nom de classe de profound show TO juste à l'intérieur, nous allons avoir une balise IMG, équivalente à SRC. Je vais juste copier une image aléatoire sur Internet et la coller ici. L'ensemble de ce lien est correct, cela ne pourrait-il pas aider ? C'est ici ? Très bien, donnons-lui rapidement un nom de classe de profile show IMG. Fermons-le avec l'étiquette à fermeture automatique. Juste après l'image. Nous allons avoir une autre division. Donnez-lui un nom de classe. Les détails du profil, non ? Dans les détails du profil, nous allons avoir du spam. Affichez certains paramètres, tels que le nom de l'utilisateur , le titre et le reste. Donnons-lui le nom de classe du titre de mon profil. Et le titre, je vais juste le faire réagir, le développeur de React. Donc, juste après la dernière division de Profile Shoe Top, nous allons avoir une autre division. Donnez-lui un nom de classe, un profil, bas de chaussure, comme ça. Ensuite, nous allons avoir un span avec le nom de la classe, le profil, le titre de l'émission. Nous allons les utiliser pour afficher les détails du compte de cette manière. Disons un div avec le nom de classe du profil Show Info. Et juste à l'intérieur, nous allons avoir quelques icônes ici. C'est pour ça. Allons au sommet. Importez toutes les icônes nécessaires au profil de l' utilisateur. Donc, tout en haut, je vais faire en partie, nous allons importer l'identité PEM, calendrier plus calme aujourd'hui. Emplacement plus calme, recherche, plus calme, homme , contour, coma, Android complet et publication. Tout a été importé à partir de MY Slash Icones Dash Materials. Bien sûr, vous savez qu'ici je vais leur donner leur identité, la fermer sur l'étiquette à fermeture automatique. Et juste à l'intérieur, je vais lui donner le nom de classe de l'icône d'affichage du profil qui est en place ci-dessous, nous allons avoir une portée en lui donnant un nom de classe ou une chaussure de profil pour le titre. Très bien, je vais donc enregistrer le projet , puis nous verrons ce que nous avons sur le navigateur. Très bien, l'image occupe en fait la totalité de l'écran. Stylisons donc rapidement l'image. Viens ici, non ? Et le CSS du profil. OK, d'abord, dialysons le récipient supérieur profilé. Ce type est là, Highlight Copy, viens ici, contenant du haut du profil à points. Ensuite, nous aurons Flex pour avoir six ans. Il occupe cette unité de l'écran. Ensuite, nous allons spécifier le rembourrage doit être constitué de pixels d'entraînement. Lorsque vous consultez également le navigateur, vous ne verrez peut-être pas les modifications ici, mais vous remarquerez que la barre latérale est en fait plus petite. Très bien, stylisons rapidement l'image pour plus près ce que nous avons fait jusqu'à présent. Ici, le nom du cluster de l' image est professionnel, IMG. Il suffit de spécifier la taille de l'image. Je vais faire en sorte que la hauteur soit, soit 40 pixels. Largeur Faisons 40 pixels. C'est aussi simple que cela. Lorsque vous enregistrez dans le navigateur, les identifiants. Parfait, c'est donc ce que nous avons pour le moment. Continuons. Retournez à VS Code. Finissons le style de l'image afin de ne pas avoir à y revenir. Encore une fois. Donnons-lui un rayon de bordure. 50 %. L'objet s'adapte. Faisons en sorte que ce soit cava, sauvegardons-le et vérifions-le dans le navigateur. OK, parfait. C'est sympa comme ça. Mais ce que je vais faire maintenant, c'est modifier la hauteur et la largeur. Je vais le changer en 100 photos. Je veux que l'image soit un peu plus grande. Nos droits, ça me va. Vous pouvez donc conserver n'importe quelle taille à la fin. Mais pour moi, c'est exactement ce que j'aime. Profil GAS. Donc, ici, je vais juste mettre en évidence ce div avec le nom de classe du profil Afficher les informations des lignes 25 à 27. Ensuite, je vais le dupliquer quatre fois. Nous devons donc modifier l' icône et les détails. Voici donc le calendrier d'aujourd'hui. Et je suis là. Je dois juste préciser les actes. Supposons qu' il devrait y avoir un numéro de téléphone. Alors je vais faire et faire ce que tu voudras. Ils vont avoir un contour fraisé. Je vais donc simplement m'adresser à do@gmail.com. Ici, nous allons avoir la localisation et la recherche. Je peux donc faire des économies à New York. Et voyons ce que nous avons sur le navigateur. Ou écrivez. Magnifique. Passons à la section suivante. D'accord. Donc, juste après la fin de la session professionnelle, laissez-moi vous montrer que c' est la chaussure de profil. Donc, juste après le div de clôture, qui se termine à la ligne 54, si vous suivez vraiment mon exemple. Nous allons avoir un autre div, lui donner un nom de classe pour la mise à jour du profil. Nous allons avoir une durée. Donnez-lui un nom de classe, un titre de mise à jour du profil. Il va y avoir une solution à D. Maintenant, nous allons avoir un formulaire. vrai, nous sommes dans la forme. OK, alors précisons le nom de la classe. Profil, entreprise de mise à jour. Nous allons avoir un div ici, donnez-lui un nom de classe de mise à jour du profil à gauche et à droite. Dans cette division, nous allons avoir une autre division. Donnez-lui un nom de classe pour les éléments de mise à jour du profil. Ensuite, nous aurons un nom de profil d'étiquette. Ici, nous allons avoir une balise de saisie. Le type est un quadruple test, l'espace réservé. Donnons-lui un nom de classe de mise à jour du profil. Impute. Ferme-le. Ce que je vais faire maintenant, c'est surligner le div avec le nom de classe du profil, mettre à jour l'élément, surligner tout ce qu'il contient, puis le dupliquer quatre fois. Bien. Nous allons maintenant changer ces deux noms complets. Alors. Ce seront des e-mails. Ici. On peut faire un numéro de téléphone. Ici, nous pouvons y remédier aussi simplement que cela. Donc, juste après la fermeture de la mise à jour du profil, j'ai laissé ce fichier ici. Laisse-moi te le montrer encore une fois. Voici le div avec le nom de classe de mise à jour du profil à gauche, juste après le div de fermeture, qui se ferme ici. Nous allons avoir un autre div avec le nom de classe de mise à jour du profil, non ? C'est vrai, dans cette division. Donnons-lui un nom de classe de profil, de mise à jour ou de téléchargement. Nous allons maintenant avoir une balise IMG, SRC equa. Encore une fois, je vais copier cette même photo et la coller ici. Ce lien vers l'image est ici, copiez-collez. Donnons à l'image un nom de classe de mise à jour du profil, IMG. Plus près avec l'étiquette à fermeture automatique. Juste en dessous de l'image, nous allons avoir une étiquette. Le code HTML est identique à un fichier. Ferme-le. Et ici, nous allons appeler l'icône Publier. Fermez-le à l'aide de l'étiquette à fermeture automatique. Donnons-lui le nom de classe de l'icône de mise à jour du profil. Ici, nous aurons une balise d'entrée se fermant directement dans le type de fichier de base. L'identifiant, un qualificatif. Donnons-lui du style. L'affichage va être connu. Alors, testons-le. Enregistrez le navigateur. Il dit qu'aucune n'est définie. Revenez en arrière. En fait, cela doit être résumé dans une citation, coupez-le et collez-le ici. Enregistrer. Vérifiez-le à nouveau. Magnifique. Cette image semble extrêmement grande. Ne t'inquiètes pas. Nous allons le faire dans le futur. Ainsi, lorsque vous faites défiler la page vers le bas, vous verrez cette icône publiée ici. Lorsque vous cliquez sur cette icône, un dossier s'ouvre dans lequel nous pouvons sélectionner une image. Cliquez dessus. Pouvez-vous voir que vous pouvez maintenant accéder à l' image directement sur votre PC. Console. Faites défiler l'écran vers le haut. Voici les formulaires. Maintenant, nous allons continuer. Dans chaque formulaire, vous devez absolument avoir un bas sur lequel cliquer pour soumettre le formulaire. C'est du moins ce que nous allons mettre en œuvre dès maintenant. Donc, juste après ce div de fermeture, formatons à nouveau rapidement le code. Juste après cette division de clôture. Nous allons faire du canotage. Donnons-lui le nom de classe du bouton de mise à jour du profil. Et ici, nous allons faire des mises à jour. Ce sera donc le test qui apparaîtra sur le bouton. C'est aussi simple que cela. Sauvegardons le code. Retournez au navigateur, faites défiler l'écran vers le bas. Voici le bas. Vous voyez, lorsque je clique sur le bouton, l'application apprendra à nouveau. Très bien, c'est tout pour le moment. Et dans la prochaine conférence, nous commencerons à styliser le profil utilisateur. Et croyez-moi, le résultat va être époustouflant. Rendez-vous lors de la prochaine conférence. 127. 125 Css de profil: Bon retour à tous. Si vite. Commençons par styliser le composant de profil en code VS. Nous allons commencer par l'image de mise à jour du profil. Permettez-moi de vous montrer rapidement cette image ici, car elle est destinée à un ordinateur de bureau, ce que nous allons faire. Donc, pour cela, dialysons-le rapidement. Points. Profil, mise à jour de l'image. La largeur est de 80. La hauteur est de 80. Rayon de bordure. Cinq pixels. Des objets alimentés, du cava. Marge gauche. 19 photos. Sauvegardons et vérifions le navigateur. Hein ? Tout semble bien. Je l'adore comme ça. Continuons. Déplacez-vous vers le haut. Nous allons donc commencer par le profil intitulé Container copy. Et assurez-vous de définir le CSS dans les classes d'occurrence trois. Très bien, nous allons avoir un écran flexible. Alignez les éléments au centre, justifiez le contenu. Nous voulons qu'il y ait un espace entre les deux. Je vais donc faire de l'espace entre les deux. Spécifions l'ombre du cadre. Nous devons copier le box-shadow normal que nous avons utilisé dans ce cours. Collez-le ici. Donnons-lui une couleur de fond. Esquivez l'oblique. Lorsque vous dites ventricule au navigateur. L'idée est, voyez-vous, que maintenant nous avons ce truc ici. Nous allons styliser le titre préféré. Donnez-lui une couleur. Alice bleue. Marge gauche, dix pixels. La police est 300. Le nid est le profil en navigation de plaisance. Donc, ce bouton a décrété des ballonnements. La largeur est de 100 pixels. Rembourrage de la bordure, cinq pixels. Marge, n'est-ce pas ? Dix pixels. La couleur de fond, aigue-marine. Donnons-lui un rayon de bordure de cinq pixels. Et le coût indiquera une économie et vérifiez-le. J'écris très bien. Maintenant, pour le conteneur de profils, ce type, nous allons avoir un écran flexible. La marge supérieure contient 19 photos. Le box-shadow est comme d'habitude. Passons à l'émission de profil, Flex, je vais être une fête en 19 photos. Passons maintenant à la discussion sur le profil, Display Flex. Alignez les éléments au centre. Jetons un coup d'œil au navigateur. C'est fait, tout prend progressivement forme. Nest est la mise à jour du profil. Laisse-moi te montrer ça ici. Surlignez le texte. Flex to Power en 19 pixels. Marge gauche, 19 photos. Vous voyez maintenant que c'est aligné ici. Bien. Vient ensuite le profil IMG. Et bien sûr, nous l'avons fait ici, qui est l'émission de profil IMG. Nous devons maintenant styliser les détails du profil. Laisse-moi le chercher. D'accord. Est-ce un profil, les équipes divisent le flux, la direction. Nous le voulons de haut en bas, d'accord. Je vais donc faire du colon. Lorsque vous enregistrez dans le navigateur. Pouvez-vous voir que ce sont les détails du profil. Donc, quand je retire la direction de flexion, voyons ce qui se passe. Vous voyez que la colline des détails est une ligne non descendue. Qu'est-ce qui se passe ? Je spécifie que la direction de flexion doit être la colonne. Maintenant, regardez le nouveau comportement. Bien. D'accord, précisons la marge restante. 19 photos. Nest est le nom de mon profil. Le poids de la police est de 300. Alors voici mon titre préféré. Même chose ici. Copiez, collez, profil, chaussure, bas, marge supérieure dix photos. Maintenant, nous avons le profil, affichez le titre. La taille de la police est de dix pixels. Tweet amusant. Faisons en sorte qu'il apparaisse en 100 couleurs. Je vais utiliser le RGB. Pour le rouge. Nous allons avoir 17570 pièces de vert et 170 pièces de bleu sur le navigateur. C'est ici. Passons à la ligne suivante où les profils affichent des informations. Faisons en sorte qu'il affiche la flexion, aligne les éléments, centre, la marge, les pixels des éléments, les pixels. Et la couleur va être grise. Enregistrez, vérifiez-le. Vous voyez maintenant que tout cet endroit prend réellement forme. Et je l'aime bien. Très bien, tout va bien. Nest est une icône professionnelle. Nous voulons donc styliser l'ensemble de ces icônes ici. Donnons-lui une couleur. Esquivez Apple, vous êtes en sécurité, non ? D'accord. Agréable. Je l'adore comme ça. Nous allons styliser le titre ShowInfo du profil. Donnons-lui une taille de police de 22 pixels. La largeur de police est 600. Pouvez-vous voir maintenant que l'édition semble plus épaisse. Le nid est le formulaire de mise à jour du profil. Tout comme une colonne de flexion d'affichage , puis de direction flexible. Ensuite, mettez à jour le profil des éléments sous Étiquette. La marge inférieure sera de cinq pixels. Taille de police Ça va faire 17 pixels. Maintenant, pour la mise à jour du profil par périodes, l'entrée de mise à jour du profil DOD, nous allons avoir une largeur de 250 pixels, hauteur de 21 pixels. Donnons-lui le rembourrage. Le rembourrage est de cinq pixels. Bordure. La bordure est d'un pixel. Gris uni d'un pixel. Donnons-lui un rayon de bordure parce que nous voulons qu'il soit un peu incurvé. Faisons cinq pixels. Enregistrez le navigateur. Les enfants. Magnifique. D'accord, nous devons donc tout aligner. Faisons-le rapidement. Maintenant, le nid et la ligne constituent l'objet du profil ici même. Est-ce que c'est Copiez, venez ici, collez. Ensuite, nous allons avoir une colonne d'affichage flexible, la colonne de direction flexible. Justifions le contenu. Espace entre le bas, le bouton de mise à jour. Mais je ne sais vraiment pas pourquoi les imputations ne sont pas bien alignées. Lorsque nous aurons terminé avec le bouton, nous corrigerons certainement une petite case ou des erreurs, pour ainsi dire. OK, continuons. Pour le profil, mettez à jour, téléchargez, surlignez et copiez. Nous allons avoir un écran flexible. Alignons les éléments au centre. Maintenant, pour les icônes de mise à jour du profil, il ne reste plus qu'à spécifier le pointeur causal pour le tableau de mise à jour du profil. Laisse-moi voir ici. Surlignez et copiez. Très bien, donc je pense que nous devons le trier correctement. Ça va arriver ici. Parce que nous avons le bouton de mise à jour du profil et nous avons l'icône de mise à jour du profil, le profil, l'image de mise à jour. C'est donc ainsi que cela va être trié. Consulté comme vous le souhaitez. Mais assurez-vous de pouvoir vous en souvenir à l'avenir. Il n'y a aucune frontière. Rayon de bordure, cinq pixels. Rembourrage, cinq pixels. La cause est le pointeur, la largeur de la police, la bascule et la lecture. La couleur de fond. Ensuite, la couleur de police sera blanche. Nous enregistrons le navigateur. Ainsi, lorsque vous observerez la mousse, vous vous rendrez compte que les impuretés ne sont pas bien alignées. Et comme tout, il n' y a pas d'espace entre les entrées et le bouton n' est pas censé se trouver ici. Nous voulons qu'il soit aligné au bon âge, d'accord ? Je veux que vous mettiez la vidéo en pause à la fin et que vous essayiez autant que possible de résoudre ce problème. Et après cela, vous pouvez reprendre la vidéo pour regarder ma solution à ces problèmes. Laisse-moi te montrer mon éthique. Revenez au code VS. Accédez au formulaire de mise à jour du profil. C'est ici. Nous allons donc effacer la direction de flexion. Et je vais justifier l'espace de contenu entre le moment où vous enregistrez et celui consultez le navigateur. Maintenant, nous avons cet alignement ici, et c'est le bon alignement. Maintenant, le seul problème que nous avons ici est qu'il n'y a pas d'espace entre le formulaire de saisie et les étiquettes, ni entre les champs de saisie. Revenez au code VS. Maintenant, je vais faire ici Margin Top. Faisons en sorte que la nuit soit en pixels. Cela fait, maintenant, nous devons également styliser l'élément de mise à jour du profil Ici, Lee est là où réside le problème. Très bien, nous allons donc avoir un écran flexible. Ensuite, la direction de flexion sera celle de la colonne, qui alignera les éléments de haut en bas. Il vous suffit donc de copier l'élément de mise à jour du profil comme celui-ci. Collez les crochets bouclés pour ouvrir et fermer. Faisons en sorte qu'il affiche Flex. La direction de la flexion est la colonne. Lorsque vous enregistrez et quittez le navigateur. C'est ici. Et maintenant, tout est bien aligné comme prévu. Je les adore. Faisons encore une chose. Je veux que quelque chose soit écrit en haut comme ça. Revenez en arrière et ce sera le titre préféré. Je suppose que nous avons oublié de le faire. Je vais faire Modifier le profil. Lorsque vous enregistrez dans le navigateur. C'est ici. Pouvez-vous voir que tout s'affiche comme prévu ? C'est tout pour le moment n. Dans cette conférence, nous allons implémenter le composant create user. Soudan. 128. 131 Créer l'itinéraire utilisateur: Dans cette conférence, nous allons implémenter le composant de création d'utilisateurs. Ainsi, lorsque nous cliquons sur le bateau de création d'utilisateurs, cela nous redirige pour recréer composant utilisateurs où nous pourrons créer de nouveaux utilisateurs rapidement regroupés dans du code VS, à moins de continuer. commande B pour ouvrir l'explorateur, vrai, ne déchiffrerait pas le répertoire de l'utilisateur. Nous allons créer un nouveau composant appelé create user the cheers. Générez le composant fonctionnel. Créons rapidement le fichier CSS correspondant. Agréable. Fermez la commande P de l' explorateur, puis recherchez l'application Js. Maintenant, la première chose à faire est de mettre en œuvre l'itinéraire. Juste ici. Je dois juste le surligner puis le dupliquer ici, non ? Nous sommes dans le fil. Le chemin sera slash create user. Et les éléments à afficher sont le composant Create Users. Et assurez-vous de l' importer en haut de la page. C'est vrai. Voyons maintenant si ce que nous avons fait fonctionne réellement. Je vais copier cette partie ici, directement dans VS Code. Passons à la maison. Maintenant, je vais le coller ici. C'est la touche Entrée. Ont raison ? Nous en sommes donc maintenant à la composante utilisateurs du réseau. Magnifique. Mais vous devez savoir que dans une application réelle, vos utilisateurs finaux ne seront peut-être pas en mesure de copier le chemin de cette manière. Nous devons donc implémenter le bouton de modification du lien par les utilisateurs. Ensuite, lorsque nous cliquons sur les composants de création d'utilisateurs, nous voulons être redirigés vers les composants de recrutement d'utilisateurs. Allons-y et terminons ce bas par un lien. Profil de l'utilisateur. Voici le lien en bas à droite où je vais faire le lien. Nous voulons créer un lien vers cette partie ici. D'accord ? Ensuite, mettez en valeur le canotage. Déplacez-le directement dans le lien. C'est donc la partie que nous avons créée directement dans l'application Js, comme celle-ci. Donc, lorsque vous enregistrez et consultez l'application sur le navigateur, oups, il est indiqué que le lien n' est pas défini. Revenir directement dans le profil utilisateur, c'est importer le lien depuis le routeur React. Nous allons importer le lien depuis React Router. Ne le fais pas. Lorsque vous enregistrez à nouveau les identifiants dans le navigateur. Essayons-le en cliquant sur le bouton de création d'un utilisateur enregistré. Tu peux voir ça ? Belle ? Commençons maintenant à implémenter les créations sous forme de page. 129. 126 Créer un composant utilisateur: Dans cette conférence, nous allons implémenter le composant de création d'utilisateurs. Lorsque nous cliquons sur le composant Créer des utilisateurs, nous devons être redirigés pour recréer des utilisateurs. Nous allons pouvoir créer de nouveaux utilisateurs ici. Ajoutons-le rapidement au code VS pour l'implémenter. Commande B de Vs Code pour ouvrir l'explorateur. La première chose que nous allons faire est de créer les composants. Alors c'est vrai, nous sommes dans le répertoire des utilisateurs. Nous allons créer un nouveau composant appelé create users.js. Générez le composant fonctionnel. Créons le fichier CSS correspondant. Magnifique. Nous devons donc lier le fichier CSS aux composants. Entrez une barre oblique, créez, utilisez un point CSS. Et prenez des notes, s'il vous plaît. Il s'agit d'une petite lettre. Implémentons maintenant rapidement la commande de route P pour ouvrir le set box en haut. Ensuite, je vais configurer notre application. Donc, ici, je dois juste mettre en évidence ce type et le dupliquer. Nous devons maintenant spécifier le chemin. Surlignez, essuyez-le. Le chemin sera slash create user. Comme ça. Ensuite, les composants à afficher, c' est-à-dire dans ce cas, l'élément va être créé par l'utilisateur. Assurez-vous de l' importer en haut de la page. Fermez l'Explorateur. Maintenant, nous devons copier ce chemin et l'essayer. Viens ici, rentre chez toi. Juste ici. Je vais le coller. Kit sur la touche Entrée. Et boum, ce sont des pixels pour recruter des utilisateurs. Par ici. Donnons rapidement à ce div un nom de classe pour créer un conteneur d'utilisateurs. Surlignez, copiez. Revenez au fichier CSS point create users container. Ensuite, nous allons le fléchir pour que ce soit bon, soit six. Ensuite, le rembourrage est de 20 pixels. Lorsque vous enregistrez et quittez le navigateur. Oups, jetez un œil. L'utilisateur est également en lettres minuscules. En fait, ce qui s'est passé auparavant que le composant n'était pas en mesure de voir le fichier CSS parce que l'UE était en majuscule. Maintenant, tout va bien. Enregistrez dans le navigateur. Hé, est-ce que l'utilisateur créé prend six unités de l'écran. Mais une chose que je veux aussi que vous compreniez c'est que dans une application réelle, le client peut ne pas être en mesure d' implémenter le chemin comme celui-ci. Il se peut qu'ils ne soient pas en mesure de saisir l' intégralité de ce chemin de cette manière. Nous devons donc terminer le bateau de création d'utilisateurs par le lien afin que, lorsque l' utilisateur clique sur le bateau Creative Juices, il soit redirigé vers la page de création d'utilisateurs. Maintenant, quand je clique sur le bouton, rien ne se passe. Vs Code ouvre le profil de l'utilisateur. Nous allons donc avoir un lien. Et nous voulons créer un lien vers, laissez-moi vous montrer cette partie que nous avons créée plus tôt. Slash, créez un profil utilisateur, collez-le entre les guillemets. Ensuite, nous devons mettre en évidence le canotage, le déplacer dans le lien. Formatons rapidement le code avec prettier. Ça a l'air sympa. Après avoir fait cela, essayons-le. Sûr sur le navigateur. Essayons-le en cliquant sur l'équipe Créer un pool d'utilisateurs. Vous voyez que tout fonctionne parfaitement sous forme d'aspartate ? Commençons donc à concevoir les créations en tant que société. Fermez-le, puis fermez le composant de l'application. Très bien, surlignez-les, effacez-les. Bon, dans cette division, nous allons avoir un headtag. Donnons-lui un nom de classe ou un nouveau titre d'utilisateur. Et le titre sera Nouvel utilisateur. En dessous de la balise H1. Nous allons avoir une entreprise car nous devons créer notre formulaire afin de collecter les coordonnées du nouvel utilisateur. Et à droite, nous sommes dans le formulaire, nous allons avoir les champs de saisie. Mais pour l'instant, donnons à ce formulaire nom du cluster create user. À partir de là, nous allons avoir une division. Donnez-lui le nom de classe du nouvel élément utilisateur, directement dans le div, nous aurons une étiquette. Alors c'est vrai, quand cette étiquette. Nous allons créer un nom d'utilisateur. Lorsque vous enregistrez et quittez le navigateur. C'est ici. Peux-tu voir le nom d'utilisateur ? Voici le titre, voici l'étiquette. Avec ce niveau, nous voulons avoir un champ de saisie ici. Donc, en dessous du niveau, nous allons utiliser le type d'imputation. Le type d'entrée est égal à du texte. L'espace réservé, Issaquah. Ils voient. Fermons-le avec l'étiquette à fermeture automatique. Latéralement, l' espace réservé fait référence au texte qui apparaît par défaut, directement dans le champ de saisie. Jetez-y un coup d'œil. Maintenant, vous pouvez voir que nous sommes dans le champ de saisie, nous avons une marguerite de test. Et voici le champ de saisie. Bien. Maintenant, la ligne suivante consiste à copier ce div avec le nom de classe du nouvel utilisateur. Copiez tout ce qui se trouve entre le div, puis dupliquez-le sept fois. Commençons maintenant à changer de niveau et le nom complet des autres poêles sera. Alors ici, nous allons avoir un e-mail. Ici, nous allons avoir un mot de passe. Je vais donc faire quelque chose comme ça. Ne t'inquiètes pas. Ça ne veut rien dire. Il s'agit simplement d'un espace réservé. Et ici, nous allons avoir un numéro de téléphone. Ce sera notre adresse. Et n'oubliez pas New York. Nous allons maintenant mettre en œuvre le programme. Cela va donc prendre quelques trucs, donc nous devons le faire ensemble. L'ordre du jour doit être masculin ou féminin. Très bien, maintenant nous allons utiliser le bouton radio. Alors ici, le type d' entrée ne sera plus un test, mais une radio. Aucun espace réservé n'est nécessaire pour le moment. Le nom equa agenda, identifiant, homme égal, valeur, miroir égal. Maintenant, nous allons avoir un autre label ici. Pour une fraiseuse à noyau. Dans le code HTML de l'étiquette, nous allons faire un repas. Alors maintenant, ce que je vais faire, c'est mettre en avant ce type. Copie. Viens ici, colle. Le type d'entrée est donc radio, le nom est genre. Mais cette fois, l'identifiant sera féminin et la valeur sera féminine. De plus, je dois juste souligner ce type et le copier. Viens ici, colle. Maintenant, ce sera une femme, et voici une femme, juste comme ça. Surlignez le doublon. Nous allons donc passer à l'ordre. Très bien, alors peut-être que nous avons d'autres agendas, ce que je ne connais pas. On ne peut pas appeler ça une armée si tu sais ça. Maintenant, je vais le faire. Très bien, vérifions-le dans le navigateur. Magnifique. Pouvez-vous voir ici que nous avons un agenda masculin, féminin et autre. Très bien, donc je ne sais pas, mais peut-être allons-y. Revenez au code VS à moins d'exécuter le début. Donc, ce que je vais faire maintenant, c'est regrouper tout ça dans un div. À partir de là, je vais faire div, lui donner le nom de classe de l'agenda des nouvelles utilisations. C'est vrai, nous sommes dans la division. Je vais souligner les lignes 42 à 46. Déplace-le dedans. C'est ici ? Très bien, changeons rapidement l'étiquette en genre. OK, très bien. Bon, nous sommes dans ce div de fermeture, ce div de fermeture avec le nom de classe du nouvel élément utilisateur. Nous allons avoir un autre div avec le nom de classe du nouvel élément utilisateur. Très bien, donc nouvel élément utilisateur, accord, en mettant le div, nous allons avoir une étiquette. Et je vais le faire ici en mode actif, c'est-à-dire le code HTML interne qui apparaîtra à l'écran. C'est ici. Nous allons maintenant avoir une option de sélection. Donnez à cette sélection le nom de classe du nouvel utilisateur sélectionné. Spécifions le nom. Rendons cela actif. L'identifiant est actif, non ? Nous allons sélectionner le tag. Nous allons avoir deux options. Option. La valeur sera, oups, il doit s'agir d'une chaîne et non d' un crochet. Nous allons être là , n'est-ce pas ? Nous sommes dans le code HTML interne. Nous allons le surligner, le dupliquer. Et bien sûr, vous devez savoir ce que ce sera. Non et non. Juste comme ça. Sauvegardons et scannons le navigateur. Très bien, nous avons l'option de sélection. Pouvez-vous voir que lorsque vous cliquez, vous avez oui ou non. Tout fonctionne parfaitement comme prévu. Formatez à nouveau le code afin que nous puissions avoir une indentation appropriée. Enfin, juste après le div de clôture avec le nom de classe du nouvel élément utilisateur, nous allons spécifier body. Donnons à cette classe de botanique le nom du bouton Nouvel utilisateur. Crée. Lorsque vous enregistrez dans le navigateur. Et de l'os. Voici la création de bateaux. Et la forme est vraiment belle, mais elle n'est pas aussi belle que prévu. Mais ne t'inquiète pas. Lors de la prochaine conférence, tout sera réglé et vous allez adorer l'art com. C'est tout pour le moment. Rendez-vous lors de la prochaine conférence. Restez concentrés et prodiguez des soins holistiques. 130. 127 Créer des Css utilisateur: Très bien, bon retour à tous. Dans cette conférence, nous allons styliser le composant de création d'utilisateurs. Alors, sans plus tarder, allons-y. Passons maintenant au nouveau titre d'utilisateur. Nous allons avoir un écran flexible. Alignons les éléments au centre. Alors. Justifiez le contenu. Espace entre. OK, donnons-lui une ombre. Copie. Bien sûr, vous devriez maintenant savoir où trouver cette ombre. La couleur de fond, esquive ou bleu. Ensuite, la couleur de police. Je vais le rendre bleu Alice. Rembourrage de cinq pixels. Quand tu économises. Jetons un coup d'œil au navigateur. Tu peux voir ? Hein ? Commençons donc par ce gars ici, qui est le téléphone. Passons maintenant au formulaire des utilisateurs critiques. Nous allons utiliser Display Flex, puis Flex Wrap. Nous allons le faire tomber. Sauvegardons et voyons ce que nous avons. Hein ? OK, voici le résultat. Continuons donc. Le nid est le nouvel élément utilisateur. Surlignez, copiez. Viens ici. La largeur est de 400 pixels. Faisons en sorte qu'il affiche la colonne Flex, Flex Direction. Voyons maintenant que cela va s' arranger de haut en bas. Vous voyez maintenant que nous y arrivons. Marge, dix pixels supérieurs, marge non ? 20 pixels. Nous voulons donc maintenant styliser cette étiquette. Et si vous observez l'écran, vous vous rendrez compte que cette étiquette se trouve juste dans le nom de la nouvelle classe d'élément utilisateur. Donc, ce que je vais faire maintenant, c'est mettre en évidence ce gars. Copiez, venez ici, collez. Nous devons faire référence à la marge de travail la plus simple, dix pixels inférieurs. La taille de la police sera de 14 pixels. La largeur est de 100. La couleur, qui est la couleur du formulaire. Très bien, alors faisons en sorte que ce soit gris. Lorsque vous enregistrez le paiement, le navigateur. Tu peux voir ? Magnifique. Allons-y. maintenant aux nouvelles attributions d'éléments utilisateur, laissez-moi vous montrer, qui concernent les balises de saisie. Très bien, ici aussi. Lorsque vous observez l'écran, vous vous rendrez compte que la balise d'entrée se trouve juste dans le div avec le nom de classe des nouveaux éléments utilisateur. Je vais donc simplement le souligner à nouveau. Cette fois, il suffit de tout souligner comme ça. Je suis là, collez et ensuite nous devons référencer l'impute. La plus simple est une hauteur 20 pixels, avec une marge intérieure de dix pixels. La bordure, un pixel gris uni, le rayon de la bordure, cinq pixels. OK, voyons ce que nous avons à bord. Profit. Ça a l'air sympa. Nous devons maintenant styliser le nouvel agenda utilisateur. Voyons voir. Voici les points de copie ? Vous utilisez un agenda. Ensuite, nous devons référencer l'entrée car nous voulons capturer les boutons radio et le reste d'entre eux. Donc, marge en haut. Faisons 15 pixels pour l'étiquette, non ? L'actualité ne le serait-elle pas ? Nous faisons référence à ces étiquettes. Bien. Et je vais, je vais les souligner. Viens ici. Coller. Je vais faire Label. La marge par rapport aux pixels. Taille de police 18 pixels. La couleur va être géniale, mais faisons-le comme ça. Cinq par cinq. Mais ce gris est une sorte de tika. OK, vérifions-le à l'écran. C'est bien à Nice. Ensuite, il y le canotage et ce gars ici, qui est le bouton Select et le truc à créer. Ici, nous allons mettre en évidence la sélection du nouvel utilisateur, le point de copie, les sélections du nouvel utilisateur, et juste à l'intérieur. Donnons la hauteur de 40 pixels. Cela a réduit de cinq pixels. Enregistrer. Bien. Tout est beau. Nous allons rapidement créer un style pour créer un vote utilisateur. Euh, alors, récupérons rapidement le nom de la classe. Le nom de la classe ici est « New use aborting, surligner et copier ». Viens ici. Les neutrons à points sont tous deux fins. Et maintenant, nous devons appliquer ces serviettes. La largeur est de 200 pixels. La frontière est connue. Nous ne voulons pas de frontière. La couleur de fond. Je vais le faire esquiver ici. La couleur, qui dans ce cas, sera la couleur de la police, sera : OK, faisons en sorte que ce soit le bleu Alice. Ou je peux aussi le rendre blanc. Rembourrage, gauche, droite, sept pixels, haut, bas, dix pixels. La police supprime une marge de 600, les 30 premiers pixels. Implémentons rapidement le borderradius. Le rayon de bordure et les pixels conviendront. Enfin, la cause, c'est que ça va être le goudron qui coule. Lorsque vous enregistrez et quittez le navigateur. Nous allons avoir un excellent expert à cette fin. Jette un coup d'œil. Vous voyez que tout est si beau et que je les adore. Voici donc les imputes. Tout est cool. Des amis. Ici. Actif c'est non. Tu peux y arriver. Oui. OK. Je peux choisir entre May ou femme ou ce pourrait être un autre agenda que je ne connais pas pour l'instant. Ensuite, nous avons ici l' ordre du jour lui-même. Nous devons changer quelque chose. C'est l'ordre du jour, l'étiquette, nous devons le corriger. Ouvrez donc l'utilisateur de création. Ici. On peut juste vieillir, disons 28,7 ans, à emporter. Bien. Tout fonctionne comme prévu. Mes amis, ce composant est extrêmement beau et je l'aime bien. Testons l' ensemble du composant utilisateur pour voir si tout fonctionne parfaitement bien. J'ai frappé à la maison. Magnifique. Juste ici. J'ai cliqué sur celui de l'utilisateur. Cela m'amène à la liste des Juifs. Je peux sélectionner un utilisateur individuel. Je peux aussi décocher. Je consulte. Donc, si nous avons plus d'articles ici avec des photos différentes portant des noms différents, vous les verrez triés. Donc, simplement parce que j'utilise le même test partout, vous ne le remarquerez peut-être pas, mais je peux vous assurer que le sel fonctionne parfaitement bien. Hein ? Vous pouvez donc cliquer ici, puis les objets non recherchés peuvent être triés par ordre croissant. Vous pouvez filtrer. Vous pouvez faire plein de choses ici. Tu peux aussi. Supprimer. Pouvez-vous voir que cela fonctionne parfaitement bien. Vous pouvez ensuite modifier. Magnifique. Tout a l'air bien. Donc, après l'édition, il vous suffit de cliquer sur le bouton Mettre à jour en bas. Mais n'oubliez pas qu'il ne s'agit que d'une interface utilisateur. Il se peut donc que la fonctionnalité de mise à jour ne fonctionne pas pour le moment. Donc, lorsque vous cliquez sur Creative Juices Boating and Boom. Tu peux voir ça ? Belle ? Tout va bien. C'est tout pour le moment. Et dans la prochaine conférence, nous commencerons par les feuilles de produit. Ainsi, lorsque nous cliquons sur la liste des produits, nous devons être redirigés vers le composant de la liste des produits. À bientôt. 131. Composante de liste de produits: Dans cette conférence, nous aborderons les composants de la liste des produits. Ainsi, le composant de liste de produits est en fait le même paradigme que le composant de liste de l'utilisateur. Très bien, nous allons donc avoir des éléments similaires comme celui-ci, mais juste que les noms des en-têtes changeront également. Les images. Mais le tableau est exactement le même. Nous allons utiliser la table de données MAOI. Si rapidement masqué dans le code VS. Et commençons par implémenter la commande route VS Code B pour ouvrir l'Explorateur. Voici donc les pages, et voici la liste des produits. Cliquez avec le bouton droit de la souris directement dans les listes de produits, créons le composant de liste de produits. Générez le composant fonctionnel et créez rapidement le fichier CSS correspondant. Ouvrez les engrenages de l'application. Voici que Lee est l'endroit où nous allons implémenter la duplication de l'itinéraire. Ici, je vais spécifier un chemin de liste de produits. Ensuite, nous allons afficher les composants de la liste des produits. Assurez-vous toujours de l'importer en haut. Sûr. Essayons-le pour voir si le chemin fonctionne réellement. Revenez à la maison. Et ici je vais le coller juste en haut. Cliquez sur la touche Entrée. Et boum, nous sommes maintenant dans la partie liste des produits. C'est beau, mais on dirait que rien ne s'affiche à l'écran, non ? Réglons donc ce problème rapidement. Maintenant, dans le CSS, nous avons d' abord deux div, ce div étant le nom de classe du conteneur de liste de produits. Surlignez et copiez le nom de la classe, conteneur de la liste des produits par points. Ensuite, faisons-le fléchir. Six, en sécurité. Enregistrez ici sur le navigateur. Hé, c'est ça ? Vous voyez maintenant que la liste des produits est écrite. Juste à l'extrême. Tout fonctionne parfaitement comme prévu. Fais-moi confiance. Dans la prochaine conférence, nous commencerons à concevoir les composants. On se voit alors. 132. Conception de liste de produits: Bon retour à tous. Dans cette conférence, nous allons procéder à la conception de la liste de produits. Et bien sûr, il s'agit simplement du tableau de données que nous avons implémenté dans la conférence précédente pour le tableau des utilisateurs. Alors maintenant, ce que je vais faire maintenant, c'est accéder à l'assistant de code. Nous allons copier les données du produit. Et ce sont tous des détails édités. Si vous voulez le faire vous-même, c' est assez facile de le faire. Ouvrez le fichier de données. Voici, il utilise des données. Viens ici. Nous allons le coller ici. Ce que nous avons ici est donc exactement le même paradigme que celui que nous avons ici. Il s'agit des données de l'utilisateur. Oui, donc c'est exactement la même idée. Si nous avons l'identifiant, le nom d'utilisateur, l'avatar, qui sert d'image, le statut de l'e-mail et le paiement. Ainsi, lorsque vous accédez aux données du produit, nous avons l'identifiant, le nom, l'image, le stock, le statut et le prix. Nous avons donc simplement changé les champs. OK, parfait. Revenons maintenant à la liste des produits. Encore une fois. P.sit commun Nous allons ouvrir le moins possible à l'utilisateur. Hein ? La liste des utilisateurs ne le serait-elle pas ? Nous avons la copie d' ici à ce stade. D'accord. Tu peux voir 9-64 ? Vous pouvez voir Assurez-vous de copier correctement. Copiez, accédez à la liste des produits, collez-la ici. Encore une fois, revenez à la liste des utilisateurs. Nous devons également copier les données. D'accord ? Nous l'avons fait dans la conférence précédente lors l' implémentation de la liste des utilisateurs. Vous devriez donc le savoir maintenant. Pestis déchire tout ce qui est frais, tout ce qui est beau aussi. Nous devons copier certaines entrées. Nous allons importer la grille de données. Ici. Nous voulons utiliser toutes ces informations ici même. Supprimer. Nous allons copier les lignes trois et cinq, qui correspondent à la grille de données, au lien et au plan de suppression. Collez-le également ici. Nous devons copier les États-Unis parce que nous allons utiliser le Did Hook américain. Nous commençons à implémenter le bouton de suppression, à enregistrer l'application. Maintenant, nous devons faire correspondre les champs avec les mêmes données que celles que nous avons directement dans les détails du produit lorsque vous ouvrez le fichier de données. Nous avons donc ici l'identifiant, le nom, l'IMG, stock, le statut et le prix, que la liste des produits. Cela fait, nous allons importer les détails du produit à partir des données de produit point slash SRC Slash Fall Slash. Juste comme ça. D'accord ? Nous allons donc faire correspondre les champs avec exactement les mêmes champs que ceux que nous avons dans les données. Donc, ici, le nom du champ sera produits. La tête et le nom. Ce sera un produit. Ici, est-ce que div, nous allons donner au nom de classe de l' élément de la liste des produits, donner à l'IMG un nom de classe de la liste de produits, IMG, qui est la liste des produits. Chaque image. Nous devons faire attention ici afin de ne pas commettre d'erreur stupide, nous allons modifier le champ e-mail pour qu'il soit stocké, comme dans les données. Ce sera un statut. Ce sera un statut. Le prix du nid et de la ligne ici sera le prix. Laisse-moi te montrer. Nous avons le statut et le prix. Nous avons ici l'action. Cela aidera donc le tableau de suppression et de modification lorsque tout est en fait pareil, juste que nous devons changer les noms des classes et le reste d'entre eux. Nous avons donc ici un div avec le nom de classe du conteneur d'action. Et nous avons un bouton avec le nom de classe de l'utilisateur de modification. Transformons le nom de la classe inférieure pour en faire un éditeur de liste productif. Et ici, je vais changer cela en suppression du produit. Cool. Très bien, enfin, faites défiler la page vers le haut et laissez-moi vous montrer. Nous devons donc prendre cela comme état initial. Effacez-le, surlignez, copiez, venez ici, collez les données ici, stockez les données du produit dans leur état initial. Et les données du produit se trouvent directement dans ce module. Et il comprend l'ensemble de ces éléments ici. C'est aussi simple que cette liste de produits. Faites défiler l'écran vers le bas, puis les lignes sont égales aux données, qui se trouvent en haut. Enregistrez et consultez le navigateur. Il indique que les pays du fichier de données SRC réduisent les données sur les produits. D'accord. Refaisons l'importation, importons les données des produits. Donc, à l'heure actuelle, il semble que nous devrions créer un fichier séparé pour les données du produit. Donc, ce que je vais faire maintenant, c'est copier, venir ici, directement dans le fichier de données. Nous allons créer un nouveau fichier, données sur les produits, des points. Ensuite, Heron utilisera nos données. Copions tout comme ça. Surligner. Arrête ça d'ici. Nous avons maintenant un module distinct pour l'ensemble des fichiers que nous allons utiliser. Et je pense que c'est une meilleure idée. Données sur le produit. Et gardez-le ici. Bien. Ajoutons S aux détails de chaque produit. Revenons maintenant à la liste des produits. Je vais donc recommencer l' importation à partir de zéro. Importez les détails des produits de ce gars ici. Je vais ajouter S pour manger en tant que détails du produit. Je pense que c'est terminé. Sûr. Checkout, le navigateur. Magnifique. Cliquons sur les produits. À l'heure actuelle, nous avons les articles. Tu peux voir ? Quelque chose de très rapide ? Pour le moment , nous allons spécifier les flocons afin qu'ils puissent prendre certaines unités à l'écran. C'est vrai, dans la liste des produits. Oups, nous l'avons fait ici. Lions donc rapidement le fichier CSS au composant. Importons rapidement des listes de produits CSS contenant des barres obliques à points. Lorsque vous enregistrez le navigateur, tout apparaît comme prévu, et j'adore ça. Pour le moment, l'image ne s'affiche pas. Jetons donc un coup d'œil au bouton de suppression. Pouvez-vous voir que le bouton de suppression fonctionne parfaitement ? Tu vois ? Jette un coup d' œil. Des gars sympas. Lorsque je rechargerai, tous les objets indiqueront nos débuts. ne pose aucun problème, car il ne s' agit que d'un site Web statique. Très bien, donc lorsque nous commencerons à implémenter avec le backend, certaines données seront stockées quelque part. Et puis, quand on supprime, supprime de la base de données , c'est beau. Essayons de cliquer sur le bouton Modifier. D'accord, le bouton Modifier nous amène au discours de l'utilisateur de l'éditeur, ce qui n'est pas censé être le cas. Alors, retournez en arrière. Essayons maintenant de corriger l'image. Lorsque vous regardez dans le coin inférieur droit de l'écran, vous verrez la pagination. Donc, lorsque vous cliquez sur, Pouvez-vous voir que nous continuons à passer d' un sommet du tableau à l'autre page ? D'accord. Bien. Pour le moment, l'image ne s'affiche pas. Ne t'inquiète pas. J'ai une solution simple pour cela. Mettez rapidement la conférence en pause pour la terminer et essayez de la corriger. Lorsque vous aurez terminé, vous pourrez reprendre la vidéo et voir ma propre solution. Très bien, fais des bêtises et laisse-moi te montrer. Bien, la méthode de rendu ne dirait-elle pas que le SRC sera un avatar params point rho point, un nom ? Lorsque vous ouvrirez les données du produit, vous vous rendrez compte que nous n'avons pas d'Avatar ici. Tout ce que nous avons ici, c'est AMD. Nous devons donc référencer l'IMG et noter Avatar. Venez ici et collez les paramètres IMG point roll, point IMG lorsque vous enregistrez dans le navigateur. Et ce sont celles-ci, cependant, les images n' apparaissent pas comme prévu. C'est donc tout simplement parce que nous ne l'avons pas stylisé. OK, donc la taille de l'image ici est extrêmement grande. Cela ne va donc pas apparaître comme prévu pour le moment, mais imprudent. Dans la prochaine conférence, nous y apporterons une solution rapide. C'est souvent notre n. Passons rapidement à la prochaine conférence pour styliser cette entreprise. 133. Liste de produits Css: Très bien, allons-y pour styliser le composant de la liste des produits, l'héroïne, en VS Code. Ouvrez la liste des produits CSA. Et maintenant, nous pouvons diviser l'écran. Ouvrez ensuite la liste des produits, parcourez l'interface utilisateur. Donc, d'abord, je veux que nous stylions l'image. Nous allons donc avoir ici la liste des produits, la liste des produits IMG point IMG. La largeur et la hauteur seront de 50 pixels. Le rayon de la bordure. Cinq pixels. L'objet s'adapte. Couvercle. Enregistrer. Vous voyez maintenant que ça a l'air bien. Mais je souhaite également que nous augmentions le nombre d'éléments qui seront affichés dans ce tableau. Alors faites défiler la page vers le bas. Ici, la taille de la page est indiquée, je vais en faire huit. Lorsque vous enregistrez dans le navigateur. Pouvez-vous voir qu'il y a un problème avec cette image avec l'identifiant de cinq. Le produit est donc né de l'idée de cinq. Nous devons y jeter un œil. Données sur le produit. Cherchons le produit avec l'idée de cinq, n'est-ce pas ? Pourquoi ne viens-tu pas ? OK, ce que je vais faire maintenant, c'est copier un autre produit à partir d'ici. Ensuite, remplacons-le, essuyez-le, collez-le ici. Lorsque vous nous sauvegardez, voir ce qui se passe ensuite fonctionne parfaitement. Nous avons maintenant augmenté le nombre d' éléments qui seront affichés sur notre table. N'oubliez pas de toujours trier vos CSS et les occurrences en fonction de leur apparence dans la ligne de composants. Elles seront surlignées et copiées en haut de la liste des produits . Ainsi, l'élément de la liste de produits précède l'IMG de la liste de produits, ou l'image de la liste de paramètres. Nous allons avoir un écran flexible. Alignons les éléments au centre. La marge sera de dix photos. Lorsque vous enregistrez et quittez le navigateur. OK, bien. Ça a l'air plus propre. Le nid est l'éditeur de liste de produits. Et il vient juste après la liste des produits IMG. Permettez-moi de vous montrer un acte de vente, surligner et de le coller ici sous l'image de la liste des produits, puis la bordure. Aucune. Ce que je réduis de dix pixels. Rembourrage, cinq pixels, dix pixels. La couleur de fond. Dodge W. La couleur. Il va être blanc. Console. Ça va être un pointeur, une marge, non ? 20 pixels Enregistrez et consultez le navigateur. Les preuves de ces gars apparaissent bien. Et dialysons l' édition en bateau en toute simplicité. Ce que nous allons faire, c'est changer la couleur. Copiez donc le nom de classe du produit à supprimer. Viens ici, supprime le produit par points. Donne la couleur. La couleur va être rouge et le curseur va verser du goudron. Vous enregistrez et quittez le navigateur. Et boum, tout apparaît comme prévu. Mais pour l'instant, j'ai rapidement remarqué que l'image de l' utilisateur haut à droite de l'écran, qui se trouve juste ici dans le menu de navigation supérieur, avait tout simplement disparu. Il n'y a rien là-bas. Cela pourrait être un problème de connexion Internet avec moi ici. Alors n'ayez pas peur. Assurez-vous de le réparer. S'il y a un objectif n, c'est tout pour le moment. Rendez-vous dans la section suivante de ce cours. Prends soin de toi.