Le site Web de portefeuille réactif Ultimate React Js

1. Introduction du cours: Bonjour, Bienvenue et merci beaucoup de l'intérêt que vous portez à mon cours. Dans ce cours, je vais vous apprendre comment créer un site Web de portefeuille réactif en utilisant différentes technologies telles que React, js sont USGS, Bootstrap, load JS, express JS et minima. Et à la fin de ce cours, vous pourrez déployer le site Web sur le serveur, ce qui implique que votre site Web de portefeuille sera accessible sur Internet. Ça a l'air bien, non ? Magnifique. Les deux premières images. 2. Démo de projet: Sur l'écran se trouve soudainement l'application que nous allons à Butte dans ce cours. Et je veux commencer par dévoiler l' un des futurs impuissants de cette application que vous ne pouvez pas mépriser. Et cet avenir est la fonctionnalité de messagerie. Donc, quand je frappe la haute armée en train d'avorter, il va falloir me recontacter le composant où votre client potentiel sera en mesure de communiquer avec vous et de vous embaucher. Essayons donc en cliquant sur la haute armée qui avorte. Voyez-vous le défilement lisse, j'adore ça. Donc, ici, nous allons continuer en cliquant sur descendre acheté pour vérifier si l'entreprise est bien validée. Jetez un coup d'œil au coin supérieur droit de l'écran. Vous verrez le message de toast et il est écrit, s'il vous plaît sentir ou les champs avec les champs de nom de l'e-mail. Avant de cliquer sur le bouton Envoyer, je dois vous montrer ma boîte de réception pour plus de clarté. Le voici ? c'est sûr qu'il n'y a pas de nouveau message dans ma boîte de réception. Pouvez-vous la voir sur le site Web ? Essayons en cliquant sur le même embarquement. Jetez un coup d'œil. Pouvez-vous le voir, merci d'avoir contacté une hélice. Laissez-moi vous emmener à la boîte de réception. Et voilà. Cliquez ici pour ouvrir. Voici le nom de l'expéditeur. Envoyez-nous un e-mail, et voici la phrase du message. C'est l'un des plus importants futurs du site Web du portefeuille. Ne vous inquiétez pas, je vais vous apprendre comment implémenter cette fonctionnalité à partir de zéro. Elle sur le site Web. Sa droite, Alors maintenant cliquons sur l'appel à l' action acheté dans Smooth Scroll vers les composants de la maison. Voyons la région de porte achetée à la roulette. Cliquez sur le tableau Get Erosion in. Il va télécharger mon CV. Et je vais cliquer pour ouvrir. Voici donc mon CV. Vous voyez, ici, nous avons les icônes des réseaux sociaux. Et lorsque vous cliquez sur l'une des icônes, cela vous amène à la page correspondante. Et juste en dessous des icônes, nous avons le nom et le bel effet de type avec différents emojis. Et maintenant mon Hoover et la photo de profil, il va zoomer pour améliorer la visibilité. Maintenant, je survole, puis je l'enlève. J'espère encore que je l'enlève. Passons rapidement au composant À propos de moi. Et quand je clique sur le bouton À propos de moi, il va faire défiler vers l'autre composant. Voici le volet About Me, une composante où vous pourriez appeler vos prétentions potentielles sur vous-même. Et voici les composants du CV. Ce composant est très important simplement parce que c'est là que vous partagerez votre expérience avec vos clients potentiels. Vous devez montrer votre historique professionnel, vos compétences en programmation, vos projets et votre intérêt. Ainsi, dans l'arborescence des listes d'attente, vous devez afficher depuis combien de temps vous travaillez dans l'industrie et l'entreprise avec laquelle vous travaillez actuellement. Pour la compétence de programmation. Vous devez montrer vos compétences en fonction de vos capacités. Et tout ici est bien personnalisé. Mais les projets, cela inclut les différents projets que vous allez afficher, la début et la date de fin. Donc ici, le site Web de portefeuille personnel, ni par un site de commerce électronique de boutique. Et ici, nous avons l'intérêt, ce qui implique votre passe-temps. Et ici, nous avons la composante témoignage. Et nous allons faire défiler le témoignage depuis le bord droit de l'écran vers la gauche hors de l'écran. Et voilà ce que dit votre client à votre sujet. Enfin, nous avons le composant Contactez-moi, et c'est là que vos clients potentiels pourront vous contacter en vous envoyant des courriels. Cette fonctionnalité est vraiment fantastique. Très bien, laissez-moi vous montrer la Fed en animation. Et lorsque vous faites défiler le site Web vers le bas , et lorsque je fais défiler vers le bas, vous réaliserez que les composants alimenteront DUC, n'est-ce pas ? Laissez-moi recharger. Jetez un coup d'œil. Une fois encore. Lorsque je fais défiler vers le bas, le composant d'origine s'estompe. Voyez-vous la composante témoignage ? Et le composant ? Okay, donc éliminons la plus grande réactivité. Sortons ça sur iPhone 5. Pour 678. Avec ceux-ci, je peux vous assurer que le site Web est 100% réactif sur nos plateformes. Donc, si vous souhaitez consulter ce site Web de portefeuille, à la fin, voici l'adresse. Vous pouvez rapidement taper sur un moteur SET, il Abeba dot herokuapp.com. Et ensuite, cet élégant site web de portfolio s'affichera sur votre écran. Et maintenant, qui suis-je ? Mon nom est le plus simple et j'ai plus de sept ans d'expérience dans le développement de logiciels, n'ai pas travaillé dans différentes entreprises tant que développeur complet. J'ai donc l'expérience qu'il faut pour suivre ce cours. Dans ce cours, je serai votre instructeur. Ne vous inquiétez pas, je vais tenir la main sur Butte ce site Web classique de portefeuille de pièces jusqu'à la dernière étape du déploiement. Et à la fin, vous seriez en mesure de déployer le site Web sur un sauvetage et de pousser le code source vers GitHub. Cela dit, inscrivez-vous rapidement et commençons. On se voit alors. 3. POSER DES QUESTIONS: Poser une question est si importante simplement parce qu'elle vous permet d'aller dans la bonne direction. Donc, chaque fois que vous rencontrez des problèmes, faites toujours bien de poser des questions avant commencer la conférence suivante. Cependant, je comprends clairement que vous serez Busey Lénine ce cours. Mais j'apprécie profondément si vous pouviez passer quelques minutes de votre temps à lire une feuille, une critique de harnais sur ce cours. Et de cette façon, je reçois un feedback de votre part et j'espère que McManus lui donne raison. Donc, sans plus tarder, commençons. 4. Créer une application React: Nous allons maintenant commencer à créer l'application. Et lors des premières conférences, j'ai réalisé que la plupart d'entre vous connaissaient probablement ces onglets. Tout simplement parce que je suis bloqué avec la configuration de base de l'application Create React. Alors, s'il vous plaît, supportez moi parce que je veux juste expliquer les poêles au profit des personnes qui débutent dans React js. Et la raison est que je veux prendre tout le monde seul. J'ai eu tellement vite à React js.org. Et voici l'adresse. Procède à la documentation. Le voici. Il suffit de cliquer sur les chiens ? Très bien, donc ici sur Create a New React Up. Le voici dans le coin supérieur droit de l'écran ? Cliquez sur. La première chose que nous allons faire ici, c'est de générer une plaque chauffante d'une application React, qui comprend les bibliothèques, les fichiers initiaux et les dossiers pour exécuter une simple application React. La documentation React est affichée à l'écran. Et bien sûr, passer par cette conférence n'est pas pertinent pour le but de ce cours, n'est-ce pas ? Donc, si vous êtes débutant, je vous recommande vivement de lire je vous recommande vivement de lire la documentation afin d'avoir une connaissance de la réclamation de ce qu'est un React js. Faites défiler rapidement vers le bas, sauf continuum. Ici, la commande MAX qui serait utilisée pour exécuter simplement l'application Create, React sans avoir à l'installer sur notre queue CCE. Bon, alors commençons. Retournez sur votre bureau. Et ici, nous allons créer un répertoire racine appelé Portfolio Pro. Cliquez ici avec le bouton droit sur la nouvelle nourriture. Portfolio pro. Phrase technique. Lorsque vous nommez votre projet, utilisez toujours un nom descriptif indiquant le but du projet. Vous serez donc en mesure de le reconnaître à l'avenir. Ok, donc la prochaine ligne est d'ouvrir ce répertoire avec l'éditeur de code et l'éditeur de code parfait que je vais utiliser dans ce cours, leasing. Donc le code VS. N'hésitez pas à utiliser n'importe quel éditeur de code de votre choix. Mais pour moi, VS Code est mon préféré. Et lorsque vous regardez dans le coin supérieur gauche de l'écran, vous verrez ce répertoire d'un portefeuille de cheveux Pro. Mais pour certains d'entre vous, vous ne le verrez peut-être pas là-bas. vous suffit donc de faire glisser et de déposer le répertoire du portefeuille vers le bas dans le code VS. Il vous suffit donc de faire glisser puis de déposer. Donc, lorsque vous ferez cela, vous le verrez certainement ici. Maintenant. Maximisez le code VS, puis fermez-le. Ouvrez le terminal intégré VS Code. Et sur Mac, vous pouvez le trouver ici dans le menu du haut. Et puis un nouveau séminaire. Juste dans le terminal. Nous allons écrire la commande pour installer React js. Et je vais faire du MDX, créer un tableau de bord, réagir. Nous n'installerons l'application React dans un paquet séparé. Et je vais nommer le client du package. Vous pouvez décider de modifier le nom du paquet à votre extrémité. Mais je vous recommande fortement de vous en tenir au client de la convention simplement parce que React js concerne le frontal, ce qui implique la partie UI de l'application. Très bien, donc distillation réactive est donc en cours. Et ce serait certainement, je dois juste avancer rapidement à la conférence. React est installé avec succès. Pour continuer, nous devons suivre cette instruction. Ok, donc nous devons d'abord céder sur le répertoire client où nous avons installé le React js, puis appuyer la touche Entrée sur votre nid de clavier. Nous devons démarrer le serveur de développement frontal. Donc, nous allons faire MPM, commencer. Appuyez sur la touche Entrée de votre clavier pour le déclencher. À l'écran se trouve la page de Londres. Par défaut, le serveur est exécuté sur le port 3000 localhost. Le voici. Ok. Et maintenant, nous en avons fini avec l'installation. Lors de la prochaine conférence, nous commencerons à dévoiler la chaudière React. C'est tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 5. Plate à Boiller React: Dans cette conférence, nous allons dévoiler la chaudière React. Ouvrez donc rapidement le répertoire client. Continuons avec le fichier package.json. C'est là que se trouvent toutes les dépendances qui concernent le front end. Et ici, nous avons React 17.2 est stocké et le nid est, ils ne réagiront pas bien que React DOM soit utilisé pour travailler avec le module objet document dans les sourcils vers le haut. Et ici, nous avons les scripts React et les vetos Web. En bas. Voici les scripts qui sont corrects. Et voici le début que nous lançons dans la conférence précédente pour démarrer le serveur. C'est ici que se trouve le BWT. Ainsi, lorsque NPM exécute BWT, il va construire les ressources statiques pour le déploiement. Très bien, donc à l'avenir, lorsque nous voulons déployer cette application sur le serveur, nous utiliserons les abus. Et ici, nous avons le test et l'Égypte. En fait, l'éjection est nécessaire lorsque vous vous éjectez de l'application Create, React et personnalisez votre composant WebPart. rapidement passé au index.html, puis dirigez-vous vers le public et faites-le brouiller. Faites défiler vers le bas Donc, avant de continuer, nous devons comprendre ce que réagit GS. React JS est une bibliothèque JavaScript utilisée pour calculer une application d'une seule page. Et ici, nous avons une div avec l'identifiant de la racine. Permettez-moi de vous montrer ce qui se passe sur la nourriture de papa. Procède à la source, qui est le SRC. Ouvrez le fichier index.js. Et en haut, nous avons importé React depuis le module React. Et aussi le module React DOM de React DOM. Et le DOM React possède une méthode appelée render. Et cette méthode aléatoire prend en compte le composant principal. Le voici. Et le composant Min up est importé en haut. C'est ici. D'accord. Maintenant, ouvrez l'application js. Je vais juste le dire. Commande T ou Control T sous Windows. Nous devons donc définir AP dot js. Voyez-vous maintenant que nous avons quelques ESG ici. La différence entre le CSS et le HTML réside donc dans l'attribut de nom de classe. En HTML, c'est une classe, mais ici même dans GSS, il s'agit d'un nom de classe car la classe est un mot-clé réservé. Plus tôt, je vous ai dit que Reacts est utilisé pour calculer une application d'une seule page. La question est de savoir comment cela fonctionne-t-il ? Laissez-moi vous montrer rapidement. Maintenant, tout ce qui se trouve dans ArcGIS est transmis au point d'index js. Laissez-moi vous montrer. Pouvez-vous voir ici le fichier app.js. Lorsque le fichier app.js est rendu ici, il va passer au index.html via cette ligne de code, Document.GetElementByID de root. Nous devons donc ouvrir le point d'index HTML. Maintenant, c'est la div avec l'identifiant de la racine. Lorsqu'il est transmis au fichier index.html, il sera rendu ici entre cette div avec l'identifiant de racine. Donc, en résumé, alors dirigez-vous vers le RGS, tout ce que nous rendons dans le RGS, d'accord. Serait transmis au index.js vendu lorsque l'objet est rendu, si je l'entends, va passer par cette ligne de code, puis transmettre tout le contenu du app.js vers le fichier index.html, C'est vrai ? Dans cette plongée avec la route de l'id. Le index.html est donc ce qui est affiché sur le Web. Très vite, nettoyons le code. Mettez en surbrillance, essuyez-le. Et puis, des lignes 18 à 26, essuyez-le. Essuyez-le. Et le portefeuille de titres est en hausse, foiré jusqu'à l'endroit où nous avons le contenu. Et ensuite, nous allons le faire. Nous devons donc maintenant supprimer les fichiers dont nous n'avons pas besoin dans ce cours. Nous n'en avons pas besoin ici. Maintenez enfoncée la touche Commande sur Mac et la touche Ctrl sous Windows pour sélectionner. Et puis nous n'avons pas besoin du logo point SVG, le point de test de configuration HGS. Cliquez avec le bouton droit, Supprimer. Très bien, Heron à l'UP GAS. Voici le loin manquant. Nous l'avons supprimé dans le SRC et nous l'avons importé ici dans UP GAS. Nous devons donc également supprimer l'importation. Coffre-fort. Nous devons donc mettre en surbrillance de la balise d'en-tête d'ouverture à la balise d'en-tête de fermeture. Essuyez-le. Économisez. Rendez-vous à la place, à moins de le vérifier. Elle a raison. C'est donc le résultat que nous attendons de cette conférence. Lors de la prochaine conférence, nous commencerons à mettre en place la structure de notre projet. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 6. Configurer la structure de projet: Nous allons mettre en place la structure de notre projet en suivant les meilleures pratiques. Cliquez avec le bouton droit de la souris sur le SRC, cliquez sur un nouveau dossier. Et ici, nous allons créer un dossier appelé conteneur de portefeuille. C'est vrai ? Dans ce conteneur de portefeuille, nous allons créer un autre répertoire intitulé À propos de moi. Cliquez avec le bouton droit. Nouveau dossier. A propos de moi contiendra le répertoire à propos de moi. Il s'agit d'un fichier CSS et des images correspondantes. C'est vraiment une histoire amusante à propos de MON composant. avons donc besoin d'un autre. Cliquez avec le bouton droit sur le conteneur de portefeuille ici sur New Folder. Et cela s'appellerait « contactez-moi ». Et bien sûr, vous devez savoir que le contact me contacte également et nous contenons le composant, son fichier CSS et ses images associées. Cliquez à nouveau avec le bouton droit sur le conteneur de portefeuille. Nouveau dossier. Et ça s'appellera « chez soi ». D'accord, il suffit de suivre mon exemple. CV, portefeuille, conteneur, nouveau dossier, FUTA. Et le nid est un témoignage. Nous avons maintenant fini de mettre en place la structure de notre projet. Ainsi, lors de la prochaine conférence, nous commencerons à bâtir sur cette structure. Prends soin de toi. 7. Composante de profil 1: Suivant la structure de notre projet, nous allons commencer par la composante maison. Et comme vous pouvez le rappeler, lors de la conférence précédente, nous avons créé tous ces répertoires directement dans le conteneur du portefeuille. Le voici sur le bord gauche de l'écran, directement dans l'explorateur. Superbe. Le premier que nous allons maintenant faire est de créer le composant profond. Cliquez avec le bouton droit sur le répertoire personnel ici sur le nouveau fichier. Et cela s'appellerait profil dot js. Phrase technique, lorsque le composant mnémonique utilise toujours la convention de dénomination pascale, ce qui implique de mettre en majuscule la première lettre de chaque mot. a l'air bien, Beautiful. Maintenant, nous devons créer le fichier CSS correspondant. Cliquez à nouveau avec le bouton droit sur le répertoire personnel. Ici, dans New File. Css à points profonds. Elle sur le profil GAS et déteste ça. Ici, nous allons utiliser les raccourcis pour générer le composant fonctionnel React js. J'aurai un c, et voici. Appuyez sur la touche Entrée pour sélectionner. Pour certains d'entre vous, il se peut que cela ne fonctionne pas. Tout ce que vous avez à faire est d'installer un plugin très puissant appelé extrait de lecteurs React Native React. Permettez-moi de vous montrer comment installer cet extrait de code sur l'explorateur. Et si j'entends, vous devez cliquer sur les extensions, puis vous voyez juste ici en bas à gauche, cliquez sur les extensions. Très bien, à l'intérieur du set box, nous allons chercher React, Native et le haze déjà. Je l'ai installé sur ma machine. C'est donc la raison pour laquelle vous voyez la désinstallation achetée. Quand voyez-vous ? Mais à votre fin, si vous ne l'avez pas installé, vous verrez l'installation de la navigation de plaisance. suffit de cliquer sur le bouton Installer et de le faire installer sur votre code VS. Et pour certaines raisons, si cela n'a pas fonctionné pour vous pour la toute première fois, il suffit de redémarrer VS Code. Maintenant, à moins de le fermer. Ici, nous allons donner à cette div un nom de classe de conteneur de tiret profond . Et bien, dans cette div, nous avons besoin d'une autre div avec le nom de classe du parent du profil. Div. Donnez le profil du thème de classe au tableau de bord parent. Aussi malheureusement. Un autre, div avec le nom de la classe, les détails du tiret de profil. Enfin, nous avons besoin d'une autre div avec le nom de classe Cornrows. Parfait. Très bien, alors cachons l' explorateur ou passons à vos fenêtres. Maintenant, ce que nous allons mettre en œuvre, ce sont les icônes des médias sociaux. Passons maintenant au projet de démonstration. C'est l'adresse d'un Hey, il va portefeuille dot herokuapp.com. Et c'est ce que nous voulons mettre en œuvre dans un premier temps, Facebook, Instagram, YouTube et Twitter. Code VS de Toronto à moins de le faire rapidement. Donc, dans la div avec le nom de la classe, bien sûr, nous allons avoir la balise a. Maintenant. Nous allons avoir l'étiquette « I ». Donnons un nom de classe de f, a f dash, Facebook dash, square, lambda moins que ligne est de dupliquer ce code quatre fois. Je vais donc juste souligner de 9 à 11 lacets. Appuyez sur les touches Maj et Alt enfoncées, puis appuyez quatre fois sur la flèche vers le bas de votre clavier. Voyez-vous que c'est exactement ce que nous faisons pour dupliquer du code dans VS Code. Et ici, nous allons changer le nom de la classe en FA. Google Dash, tiret carré. Et maintenant, nous avons besoin de l'icône Instagram. tableau de bord F8 est le sol. Et nous avions besoin de YouTube. Et enfin pour Twitter. Économisez. Lançons maintenant l'application pour voir ce que nous avons à bord sur le terminal. Et puis nous devons CD client, MPM. Commencez. Attendons ça. C'est vrai ? Donc, si vos icônes ne s'affichent pas, vous savez pourquoi elle dans le code VS ? Et laissez-moi vous montrer ici. Nous avons utilisé les classes Bootstrap, qui sont les classes FA, Dash, Facebook, Google Plus Instagram et les autres. Donc, pour utiliser ces classes, nous devons lier le projet à Bootstrap. Ouvrez le répertoire des matériaux. Pour moi. Le répertoire des matériaux se trouve directement sur mon bureau. Et pourquoi est-ce que c'est ? Je n'ai donc qu'à ouvrir. Ce répertoire se trouve juste là dans la ressource. Alors, jetez-le et téléchargez ce répertoire. Il contient tous les fichiers nécessaires que nous allons utiliser dans ce cours. Maintenant ouvert le pourrait l'aider. Les cheveux, c'est ça ? Et c'est le lien Bootstrap. Copiez l'héroïne dans la commande P du code VS pour afficher cette petite zone de recherche en haut. Ensuite, nous allons définir le code HTML des points d'index . Et voilà. Superbe. Collez-le ici. Bon, il faut donc formater le code pour qu'il soit un peu revendiqué. Cliquez avec le bouton droit. Formatez le document avec Previa. Bon, maintenant le code semble très propre. Je l'aime bien. Et si vous n'avez pas de pédia sur votre VSCode, à nouveau Explorer, permettez-moi de vous montrer comment l'installer. Explorer puis cliquez sur S. Tension est juste ici dans ce bac à sable. Vous devez préparer la précommande et la brumer. Je l'ai déjà installé. Cliquez donc sur le bouton Installer à la fin pour l'installer sur votre VSCode. Fermez-le vers le bas. Maintenant, nous devons rendre ce composant dans le js P, puis définir notre app.js ici dans cette div. Ok, avant de faire ça, il suffit d'importer un profil d' importation, n'est-ce pas ? Je n'ai pas importé automatiquement que de m'inquiéter, je vais le faire à partir de zéro. Je dois juste effacer ça. Importer le profil à partir du profil de barre oblique de conteneur de profil oblique de point . Et ici, il suffit de rendre le profil du composant avec la balise à fermeture automatique. Enregistrez-la sur le navigateur et jetons un coup d'œil. Jetez un coup d'œil. Il apparaît juste ici au centre de l'écran. Essayons en cliquant sur l'icône Facebook, Instagram, YouTube et Twitter. Les liens ne fonctionnent pas. Tu sais pourquoi Heron utilise le code VS et laissez-moi vous montrer. Passez au profil. Et ici, juste dans la haute teneur en potassium ou les amis. Nous devons copier et coller le lien correspondant aux médias sociaux là-bas. Donc pour Facebook, pouvez-vous voir que je n'ai qu'à copier l'URL de ma fosse Facebook. Viens ici, essuyez le signe de la livre, puis collez. Je vais donc le faire pour YouTube. Voici ma chaîne YouTube. Voici donc l'icône de YouTube. Assurez-vous de coller le lien et les icônes correspondantes. D'accord ? Je dois donc le faire aussi pour Instagram. Vous pouvez donc continuer à le faire votre côté et tout faire. Maintenant, pour Instagram. Wip de cette livre pâte enregistrée, a été sur le navigateur. Ouvrez le portefeuille, remontez, rechargez. Pour essayer, cliquons une fois de plus sur les icônes. Facebook. Voyez-vous ? Il suffit donc de remonter. Essayons-le sur YouTube. Et Tierra, bonne phrase, tout fonctionne comme prévu. Ainsi, lors de la prochaine conférence, nous allons procéder au reste des détails sur le composant de profil, y compris le réacteur typique. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 8. Composante de profil 2: Dans cette conférence, nous allons implémenter cet effet de type. Je peux voir. Et nous allons également mettre en œuvre la brève description, les corps et la photo de profil. Code VS Toronto. À moins de le mettre en œuvre rapidement. Avant de continuer, nous devons faire quelque chose. J'ai foiré. Et laissez-moi vous montrer ici cette div avec un nom de classe aux détails profonds. Vous voyez ? Maintenant, je veux que vous en évidence les œufs communs ou Control X pour les couper. Et puis venez ici, collez-le ici. C'est donc exactement là qu'il devrait fermer. Enregistrez-la sur le navigateur. En fait, tout se ressemble. Mais si vous n'avez pas apporté cette correction et que lorsque nous commencerons à la styliser, cela va vous affecter gravement. Donc, juste après la div de clôture de ClassName, profil, nom de base de données, nous allons avoir une autre div, lui donner un nom de classe de profil, de détails, de tiret, de rôle. Et maintenant, nous allons devoir implémenter l'effet de type. Nous devons installer le type d' objectif React sur le terminal , puis venir voir arrêter le serveur en cours d'exécution. Maintenant, je vais faire l'installation de NPM. React Dash. L'installation est en cours, nous devons donc l'attendre. War a été installé avec succès. Faites défiler vers le haut, sauf si vous importez le cornichon. Faites défiler vers le bas Maintenant, nous devons le mettre en œuvre, n'est-ce pas ? Je préfère utiliser l'étiquette à fermeture automatique. Donc, ici, nous allons faire boucler l'infini. Les étapes, définissez-le sur un objet vide. Ensuite, nous allons avoir un tableau d'éléments, qui sont les détails à afficher en fonction du temps. Et ici, nous allons avoir un Dave en plastique, séparé par une virgule. Nous voulons que ce soit une seconde. Donc, chaque seconde, nous allons avoir un affichage. Donc, ce type s'afficherait une seconde. Et puis, OK, surlignez, maintenez les touches Maj et Alt, puis appuyez quatre fois sur la flèche vers le bas. Très bien, donc ici, nous allons avoir l' développeurs de pile complète horreur des développeurs de pile complète, non ? Ce qui se passe ici, c' est que ce type va s'afficher pendant une seconde, et ensuite ce type affichera est en silicone. C'est donc plus comme si tout cela dans l'inclinaison allait attendre chaque courant de cellule. Alors quand Guy affiche-t-il un circuit va s' éteindre et que ce type affiche une seconde, ça s'éteindra. Et tout comme papa, haha, droite, la ligne de solveur Nestor est d'implémenter les emojis. donc très simple de le faire ou de marquer. Donc, s'il vous plaît, si vous vous appuyez sur Windows, il vous suffit de vous accrocher. Donc, si votre tasse, suivez mon exemple. Maintenant, placez votre souris ici, puis allez dans le menu en haut à droite. Ici sur Edit, emoji et symboles. Ici, je vais juste choisir ce type. Voyez-vous très simple à mettre en œuvre ? Et ici aussi, je n'ai qu' à choisir Omega Dot. Jetez un coup d'œil. OK. Maintenant, nous en avons fini. Donc, si vous travaillez sur Windows, il suffit de copier et coller mon code. Et vous allez l'afficher sur le Web. Non, allez au terminal. Nous devons lancer l'application une fois de plus. Démarrage de Mpm. beau, j'adore ça. Voyez-vous jeter un coup d'œil. Harold, au code VS à moins de continuer. Juste après cette balise de fermeture. Nous allons avoir beaucoup de span tag. Indiquez le nom de classe du profil, du tiret, du tiret, du slogan. Partez au projet de démonstration. Il suffit donc de copier cette brève description d'une copie Hey,. Collez-le juste entre la balise. Économisez. Découvrez-le sur le navigateur. Pouvez-vous voir, hé, est-ce que c' est maintenant le nid et la ligne est d'implémenter le bateau. Faisons donc cela rapidement. Juste après cette div de clôture. Nous allons avoir une option de profil div. Et ici, nous allons avoir un nom de classe de botnet acheté. Et juste entre le tag, engagez-moi, économisez. Et voici le bas, à droite. Nous devons donc mettre en œuvre le curriculum vitae acheté. Concluons tout cela dans une, une étiquette, hypothèse ou une phrase. Très bien, donc pour les mettre en œuvre, nous devons importer leur CV. Je suis allé dans le répertoire des matériaux. Je l'ai juste ici sur mon bureau, je l'ouvre, puis j'ouvre le portefeuille pro client public. Par conséquent, ici, nous devons copier ce curriculum vitae. Cliquez avec le bouton droit. Copier. Venez ici, collez Heron dans VS Code, effacez le signe de livre, le nom du point de CV PDF car il s'agit d'un fichier PDF. Je vais donc télécharger ici. Ici, nous allons avoir un bateau donner à ce bouton un nom de classe de dash btn surligné. Et ici, prenez votre CV, économisez. À moins d'être sorti. Voici la reprise de la navigation de plaisance. Essayons ça. Cliquez sur. Pouvez-vous le voir ? Maintenant, il télécharge mon CV, obéit et l'a. Vous voyez si beau ? C'est tout pour l'instant, pour cette conférence, à la prochaine conférence. Restez concentré et prenez soin de vous. 9. Affichage de la photo de profil et corrections: Bon, donc maintenant nous allons implémenter la photo de profil. Et après cela, nous apporterons les corrections nécessaires. Faites défiler vers le bas Juste après cette div. Nous allons avoir une autre div avec le nom de classe du tiret profond. Photo. Un autre. bord profond, image, tableau de bord, arrière-plan. Coffre-fort. Déconne à moins d'apporter les corrections nécessaires. Juste après cette div avec le nom de classe Coase. Nous allons avoir un autre def, donner le nom de la classe. Icône Dash. Superbe. Laissez-moi vous montrer quelque chose. Voici donc les points forts des voies 14 à 28 sont les balises a. Appuyez sur la touche Alt enfoncée, puis appuyez sur la flèche vers le haut de votre clavier. Le voyez-vous ? C'est exactement comment déplacer du code dans le code VS. Donc, si je veux déplacer ce code de cette div avec le nom de classe de l'icône de pause. Tout ce que j'ai à faire est d'appuyer sur Alt, puis d'appuyer sur la flèche vers le bas du clavier. voyez-vous ? Très bien, alors nous allons l'emménager. Le plus simple que sûr. Voyez-vous maintenant, nous avons le code directement dans la div avec le nom de classe Coase, icône de tiret ANOVA. Une alternative consiste à copier et coller toutes les balises a, à droite, dans une div avec le nom de classe de l'icône de tiret de cause. Par exemple, c'est souvent après cette conférence, et dans la prochaine conférence, nous commencerons à styliser cette composante. voit lors de la prochaine conférence. Restez pour les frais et prenez soin de vous. 10. Styler le profil: Commençons à styliser le composant de profil élastique. Et rappelez-vous que lors de la conférence précédente, nous l'avons laissé comme ça. Je me suis rendu compte qu'il n'est pas beau, mais bien qu'il ne ressemble pas non plus à AGI. Alors ne vous inquiétez pas, dans les prochaines conférences, nous aurons l'air parfaitement bien. Héroïne au code VS à moins de continuer. La première chose que nous allons faire ici, c'est de faire en sorte que les importations nécessaires ouvrent rapidement l'explorateur. Cliquez avec le bouton droit sur SRC, cliquez sur un nouveau dossier. Appelons ça des atouts. Et c'est vrai, dans ces ressources, nous allons créer un nouveau dossier. maison. Accédez au répertoire des matériaux, Orban, et ouvrez également les ressources SRC client pro de portefeuille. Il me suffit donc de les faire glisser sur le côté puis de copier le paquet de polices. C'est donc la police que nous allons utiliser dans ce cours. Venez ici, collez-le directement dans les actifs. Et ici, nous devons copier avec des images inutiles pertinentes pour le composant de profil. Le BDI, la forme et la photo de profil. Sélectionnez. Copier. Ouvrez la maison, collez, fermez la sonde de portefeuille. ouvrant le code ouvert, jusqu' où faut-il copier le fichier CSS. Jetez un coup d'œil. Pouvez-vous voir Copier l'héroïne dans le code VS ? Passe au point d'index css, surlignements, gommage, puis collez-le ici. C'est vrai ? Enregistrez-la sur le navigateur et jetons un coup d'œil. Superbe. Je l'aime bien. Vous voyez ? Maintenant, nous avons le bateau est magnifique. Voici l'importation, qui est le principal Barton et les VC. Ils ont souligné l'avortement. Tenue sur le code VS. Laissez-moi vous montrer. Faites défiler vers le bas Faites défiler vers le bas Voici le BTN principal, qui est la haute AMI achetée. Il suffit donc de spécifier l'arrière-plan, la taille de la police, la bordure et la couleur de la police. Et ici, nous sommes arrivés sur Hoover. Ainsi, lorsque vous passez la souris dessus, il s' agit de l'arrière-plan de la bordure et toutes les autres propriétés resteront les mêmes. Laissez-moi vous montrer. Le voyez-vous ? Lorsque je survole ma souris dessus, l'arrière-plan de la bordure change. C'est la même chose pour le PTEN surligné. Avoir atteint, c'est la même chose. Et voici le style d'un foin. Alors passe au pouvoir. Faites défiler vers le bas Et voici les couleurs que j'ai préparées pour les partitions. Mettez en surbrillance, copiez, héroïne vers VS Code. Ensuite, nous devons passer à notre app dot CSS. Mettez également en surbrillance la commande de nettoyage V à coller. Parfait. Maintenant, nous en avons fini avec les paramètres. Passons au profil point CSS. Fermez cela vers le bas, fermez-le vers le bas, masquez l'explorateur, puis passez au profil Dot CSS. Nous allons donc commencer par le conteneur de profil. Actuellement, le JS préféré. Laissez-moi vous montrer pourquoi ? Nous allons donc le régler sur un conteneur flexible. Pour ce faire, il suffit d'afficher le flex. Prenez des notes. Et lorsqu'un conteneur est configuré pour afficher le flex, il étend les éléments pour filmer l'espace disponible ou réduire les éléments pour éviter le débordement. Voici l'illustration à l'écran. Jetez un coup d'œil. Pouvez-vous le voir ? C'est beau ? Alignons les éléments. Pour envoyer notre meilleur alignement. Centre. Justifiez le contenu. Au centre, la hauteur, 10 pour cent. Hauteur moyenne, contenu ajusté et URL de l'image d'arrière-plan. Nous devons avancer quelques pas vers les actifs, vers la maison. Et ici, nous devons choisir le JPEG dot bg, qui sauvegardera comme arrière-plan du profil. Mais à l'avenir, nous allons retirer cela de cet endroit. Ce n'est donc qu'à des fins d'enseignement. Vous pouvez donc afficher quelque chose à l'écran et être heureux. Économisez. Lions maintenant les composants au fichier CSS. Procède au profil. Et ici, il suffit d'importer le profil point CSS Save. Tenue sur le navigateur. Et hé, est-ce maintenant l'effet de type et une brève description n'est plus visible. Résolvons ça rapidement. Il suffit de passer au profil CSS. Ensuite, nous devons styliser le profil. Le parent a son affichage flexible, alignement des éléments, le centre et la couleur. Faisons en sorte que ça se sente en sécurité. Allez sur le navigateur et faites-le de la brume. La taille de la batterie est de 24 pixels. Les coquelicots de la famille de polices, semi-audacieux. Maintenant, car le profil a joué ce rôle. Je n'ai donc qu'à souligner, copier. Venez ici, collez, fermez le support bouclé. Et tout ce que nous devons faire ici, c'est d'effacer le nom. Et nous allons avoir un rôle, le deux-points de direction flexible. C'est donc dans cette direction que les lignes de goût ont tapé la marge. Nous allons donc l'avoir du haut, de la droite, du bas à gauche, du haut pour 10 pixels, de la droite, 0, du bas, 24 pixels et 0 à gauche. Ensuite, je dois juste mettre en surbrillance, copier, coller, fermer le crochet bouclé. Et ici, nous devons styliser la tête. Et bien sûr, vous devez savoir que l'effet de type est juste dans la première étape. Laissez-moi vous montrer l'étiquette cachée et la brumer. Nous faisons donc référence à tous ces hauts droits, donnez-lui une taille de police de 40 pixels. Police, famille, devise que vous économisez. Jetons un coup d'œil. Voyez-vous bien, le test principal. Donc, la couleur, nous devons maintenant utiliser ces couleurs. Nous avons donc importé LAR, blanc, le texte surligné. Nous voulons donc utiliser le cola que nous avons importé plus tôt. Nous devons définir l'AARP dot css. Et ici, nous voulons utiliser la couleur orange foncé sur le CSS. C'est aussi simple que ça. Le slogan de rôle profond, qui est la brève description. Ce type ici, profil, tableau de bord, tiret. Slogan. Donnez-lui une taille de téléphone de 19 pixels. Donnez-lui une marge. En haut, nous allons avoir 50 pixels à partir de la droite. Et 0 sur le reste des côtés. Et ici, les coquelicots de la famille de polices s' allument, chargent, vous voyez du code ou écrivez quelque chose vient de me dire. Démerdez là où nous avons les tests surlignés. D'accord. Très bien, les gars, il faut bien épeler ça. Écoutez les gars, nous sommes en train de construire un projet de portefeuille classique. Il faut donc passer un examen grammaticalement. Je pense donc que c'est cool. Et ici, nous allons donner la marge. Je vais donc sélectionner Duplicate women it pour la mise en attente. Donnez la couleur d'arrière-plan. Le fond est blanc. Nous devons donc faire en sorte que la couleur noire Save. Et avant de continuer, permettez-moi de vous montrer quelque chose dans le profil GAS. Voyez-vous ici cette div avec un nom de classe d'options de tiret profondes. Nous devons donc être grammaticalement EXXAT. Enregistrez-la sur le navigateur. Maintenant, Hoover sur le getter importe DOC. En fait, nous allons utiliser la classe d'image de profil et l'ombre de la boîte. Nous voulons donc avoir un cercle. Pour ça. Nous allons définir le rayon de la frontière à 50 %. Donnez-lui une hauteur de 80 pixels, donnez-lui une largeur de 80 pixels pour la marge. Donc, à moins de sortir le cadre. Voyez-vous ici le cadre situé dans le coin supérieur droit de l'écran. Il semble bien. J'adore ça. Maintenant, nous devons placer la photo de profil directement sur le cadre. Je dois juste mettre en évidence cette copie. Venez ici, collez, fermez le crochet bouclé, tiret de fond et donnez la peau de 92 pour cent. Donnez-lui une largeur de 92 %. Nous devons maintenant afficher l'image. Donc on va faire l'URL, a touché les ressources, la maison, puis on a besoin de la photo de profil. Coffre-fort. Voyez-vous que ce n'est pas beau. Héroïne à code VS. La taille de l'arrière-plan. Couvrez, sûr, dirigez-vous vers le navigateur. Pouvez-vous voir que le profil s'affiche bien ? Alors maintenant, fixons ça sur le cadre. C'est assez simple à faire. Il suffit donc de copier le rayon de la frontière. Collez le droit, appuyez sur, Enregistrer et revenez en arrière. Pouvez-vous le voir ? C'est beau ? Répétez. Non, je répète. Position d'arrière-plan. Centre. Pouvez-vous le voir ? C'est beau ? Nous allons maintenant implémenter l'effet Zoom en vigueur. Laissez-moi vous montrer. Vous voyez que lorsque je survole la souris sur le profil, rien ne se passe. Je n'ai donc qu'à les copier. Venez ici, collez, fermez le support bouclé. Et ici, nous allons avoir l'UNH. Nous avons la transformation et nous lui donnons une échelle de 1,07. Et nous voulons qu'il fasse une transition d'une seconde. Sortir à l'aise. Coffre-fort. Survolez la souris sur la photo de profil. Pouvez-vous vous voir ? C'est parfait. Très bien, il faut donc styliser les icônes des médias sociaux. Le pardon, est-ce qu'il reste des pixels de rembourrage ? 0 pixels. Il nous suffit donc de tout terminer ici. Ainsi, lorsque vous placez la souris sur les icônes, compte tenu de l'échelle de 1,5. Et ici, nous devons spécifier l'étiquette I, sécuriser l'héroïne dans le navigateur et jeter un coup d'œil. Tout fonctionne comme prévu. C'est tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. Restez concentré. Et TK. 11. Réceptions de profil: Continuons avec le composant de profil. Et dans cette conférence, nous allons travailler sur la réactivité mobile. Jetons un coup d'œil rapidement. Vous voyez sur le Galaxy S5. Jetons un coup d'œil sur iPad Pro. OK, c'est cool. iPad. Voyez-vous pour l'instant que l'application ne répond pas au code VS à moins de continuer ? Commençons par l'iPad Pro. La photo de profil. Indiquons la marge. Les détails du profil, le nom et les détails du tiret de profil. Il suffit de lui donner une taille de téléphone de 20 pixels. Nous devons maintenant réduire la taille des boîtiers sur iPad Pro. Donnez-lui une largeur de 120 pixels. Rembourrage de l'index Z. Allez sur le navigateur, et regardons ça. Essayons sur iPad Pro. Encore une fois comme prévu. J'aime qu'il soit sur le code VS à moins continuer sur l'écran avec la largeur maximale de 900 pixels. Il me suffit donc de faire défiler, de surligner, copier, de virgule k, de coller, fermer le crochet bouclé. Et maintenant, nous devons changer les pixels, c' est-à-dire la taille de l'écran. Cela coïncide donc avec la largeur maximale des pixels bruts de personne. Nous devons styliser la photo de profil. Et ce que nous allons faire, c'est spécifier la hauteur de 320 pixels. La largeur, 320 pixels, lui donne une marge. Mettez en surbrillance, copiez, collez, fermez le crochet bouclé. Et sur un écran d'une largeur maximale de 100 pixels. Ensuite, la photo de profil. Indiquons la marge. Vous devriez donc savoir quelle est la règle impuissante, les portes du NCSS ici vont certainement passer outre celle-ci. OK. Profond. Dodge, parent. La marge inverse de la colonne de direction flexible à partir des 40 pixels supérieurs, 0 sur les côtés d'arrêt. Nous allons avoir son écran flexible. Justifiez le contenu. Espace entre les détails du profil. Détails. Tout ce que nous avons à faire ici, c'est de spécifier la marge. Les détails du profil, nom, virgule. Profond. J'ai joué ce rôle. Nous devons juste tester une ligne vers le Père Noël. Économisez. Rendez-vous sur le navigateur et regardons ça. Il a fière allure sur le Galaxy S5, iPhone, iPhone 6, 7 et 8. Magnifique. Essayons donc. J'ai un x sur iPad, un iPad Pro Omega. Enfin, maintenant sur un écran plus petit avec une largeur maximale de 375 pixels. Encore une fois, soulignez, copiez. Venez ici, collez, fermez le crochet bouclé, et nous devons spécifier la taille de l'écran, 3, 75 pixels. À l'écran. Nous devons réduire la taille de la photo de profil. Donnez-lui une hauteur. 75 photos. Donnez la largeur à 75 pixels. Haut de marge moins 90 grosses chaussures. Les détails du profil lui donnent une largeur de 90 %. Économisez. Maintenant sur le navigateur, c'est irréaliste. Ils devraient donc être réactifs sur toutes les plateformes. Voyez-vous ? Voyez-vous que c'est tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. Restez concentré. 12. Pied de profil: Nous allons commencer à travailler sur la FUTA directement dans la composante domestique. Permettez-moi de vous montrer ce que je veux dire par là. Je ne lis pas le projet de démonstration. Pouvez-vous voir cette courbe ici ? Mettons-le rapidement en œuvre. Passe au code VS. Cliquez avec le bouton droit sur Home ici sur New Folder. Et cela s'appellerait FUTA. Juste ici. Nous devons créer la nourriture, notre composant. Ici, un nouveau fichier, trop point js. Créons le fichier CSS correspondant. Outta ici sur un nouveau fichier, foo dot dot css. Nous sommes sur la nourriture RGS. Générons le composant fonctionnel. Superbe. Maintenant, il suffit de lier les composants à son fichier CSS. Donc on n'a pas à faire ça quand on commence à la styliser, non. Ainsi, avec le lien, le fichier CSS avec l'IgA alimentaire est connu. Nous allons donner ce nom de classe TV du conteneur FUTA. Si le nom de la classe food R dash, conteneur. Et dans cette div, nous allons avoir une autre div avec le nom de classe du parent FUTA. Nous devons exiger l'image IMG, SRC, support bouclé ouvert et fermé. Alors, je vais exiger. Vous devez l'espacer sur le support ouvert et fermé. Allons de l'avant pour atteindre les atouts. Accueil slash ship, tableau de bord BG dot PNG avec la balise à fermeture automatique. C'est vrai ? Superbe. Maintenant, nous allons le faire étrange. Cela s'afficherait donc en cas de problème avec l'image. Permettez-moi de vous montrer l'image rapidement. Elle a des atouts, chez elle. Et puis voici les images. N'oubliez pas que nous avons importé cette image est aileron dans la conférence précédente. Et voici le tableau de bord du navire BG dot PNG. C'est donc l'image qui doit être utilisée comme FUTA. Très bien, fermez-le. De plus, je pense que nous en avons fini avec cela. Nous devons également le fermer. Maintenant, elle est sur le FUTA CSS. Ici, nous commencerons par le contenant de nourriture ou de tableau de bord. Donnez la hauteur de 17,8 %. Phrase, je veux que vous suiviez mon exemple, pour que nous puissions tous atteindre le même résultat. Donnez-lui une largeur de 100 %. Débordement. Caché. Écran, Flex. Justifiez le contenu au centre, nourriture et au tableau de bord, au parent. Et assurez-vous toujours que les noms de vos classes sont correctement orthographiés afin de ne pas vous plonger dans des ennuis. La largeur 100 %, lui donne une hauteur de 100%. Et la largeur maximale de 1920 pixels. Maintenant, pour chaque image, le tiret FUTA, parent, et bien sûr, vous devez savoir que l'image, qui est la balise IMG, se trouve directement dans la nourriture ici. Et laissez-moi vous montrer rapidement. Cette div avec le nom de classe de la période FUTA. Et puis voici la balise IMG. Donnez-lui une largeur maximale 100 % et donnez-lui une hauteur de 130 pixels. Nous voulons cibler la façon dont il apparaît sur iPad Pro. Alignons les éléments. Flex, fin, sûr. Donc, en supposant que non, nous devons rendre les droits de ce composant dans gs p app.js. Et où est-il ? Maintenant, nous devons importer des aliments à partir de la barre oblique de conteneur de portefeuille, barre oblique domestique FUTA est aussi simple que cela. Il suffit donc de lancer la FUTA avec l'étiquette de fermeture douce, diriger vers le terminal. Et puis nous devons démarrer MPM client cd. Attendons ça. Et comme vous pouvez le voir, il affiche l'art sorti de l'écran, indiquant qu'il n'y a pas de connexion Internet. Donc, avec cela, nous devrions comprendre qu'il y a quelque chose qui ne va pas avec le code VS de l'image toronto, à moins de corriger cela rapidement. Procéder à l'étiquette foo oreilles et cheveux. Est-ce que c'est ? Très bien, donc c'est une chose que je veux vous montrer, Hey, voyez-vous ? Maintenant, chaque fois que vous avez besoin d'une image dans React JS, vous devrez arriver à la fin d'un ici, puis point par défaut, sécuriser sur le navigateur. Et regardons encore une fois. Voyez-vous qu'il semble que l'image ne s'affiche pas simplement parce qu'elle tombe directement sur le fond blanc. Jetez un coup d'œil. Voyez-vous ici, c'est l'image. Voyez-vous ? Je le déplace vers la droite, puis je le déplace vers la gauche. Je le déplace vers la droite, puis je le déplace vers la gauche. L'image est donc juste ici, mais vous ne pouvez pas la voir simplement parce qu'elle tombe en panne. Le fond blanc. Voyez-vous qu'ils ont raison ? Alors, ne vous inquiétez pas. Au cours de la prochaine conférence, nous allons le faire réparer. Et c'est souvent le cas pour cette conférence. voit lors de la prochaine conférence. 13. Présentez le pied: Voyons que les aliments sont affichés à l'écran et que le composant de profil ressemble comme prévu. Ouvrez l'explorateur. Cliquez avec le bouton droit sur Accueil. Pouvez-vous voir cette maison d'un Hey ? Cliquez ici avec le bouton droit sur New File. Chez nous. Créons le fichier CSS correspondant. Encore une fois, cliquez avec le bouton droit sur Home ici sur New File, On dot CSS. Allons à la maison , puis générons le composant fonctionnel React is. Et je sais maintenant que tu devrais savoir comment faire ça. Tellement vite. Donnons le nom de cette classe de défauts. Et nous allons appeler ça un conteneur de tableau de bord à la maison. Et ici, nous allons rendre tous les composants qui composent la page d'accueil. Nous allons donc l'importer. Hey, importons le profil depuis le profil. Et ici, nous devons importer le FUTA de FUTA slash foo tag js. Pour l'instant, nous n'avons que deux composantes. Et à l'avenir, nous aurons d'autres composants sur la page d'accueil. Si vite, voyons une tendance ici. Tout d'abord, nous devons rendre le profil avec la balise à fermeture automatique. Et le nid est FUTA. Et aussi l'étiquette à fermeture automatique. Cette note, par exemple, ne permute pas les composants. Permettez-moi de vous montrer ce que je veux dire par là. Points forts. Si vous déplacez la nourriture en haut, vous obtiendrez un résultat différent. D'accord ? Vous devez donc rendre votre composant en fonction ce que vous voyez à l'écran, qui implique simplement que vous devriez suivre mon exemple. Je dois donc le déplacer vers le bas. Pouvez-vous voir Okay. Économisez. Maintenant accroché à la CSS de la maison. Donc, ici, nous devons styliser ce conteneur, qui est le conteneur domestique. Justifiez le contenu. espace entre la hauteur est 50 vh et la hauteur moyenne, 670 pixels. Et le nid et la ligne doivent passer au profil CSS. Le voilà ? Faites défiler jusqu'en haut. Très bien, dans le conteneur de profil, je vous ai dit lors de la conférence précédente que ceux-ci seront hors de cet endroit. Mettez en surbrillance, puis Commandez X pour couper. Maintenant, elle est sur le CSS de la maison listé ici. Économisez. Passez au G S. ci-dessus et ici, nous devons essuyer le profil et les aliments sont des composants car ils sont déjà rendus dans le composant domestique. Donc, tout ce que nous avons à faire ici, c'est de louer ce composant de maison juste, dans l'application g, s. Donc cela ne sert à rien ici. Nous n'en avons pas besoin. Maintenant, nous devons juste importer maison du portefeuille conteneur slash home slash home JS et venir ici et ensuite louer ITA sûr. Cela fait, nous devons lier le JS de la maison au fichier CSS. Rapidement passé à homogène puis importé home dot css. Et s'il vous plaît, notez qu'ils sont corrects. La convention de dénomination d'un composant est la convention de dénomination Pascal. Je ne sais donc pas comment cela s'est produit. Essuyez-le, puis le F doit être sur de la caroube. Enregistrez-la sur le navigateur et jetons un coup d'œil. Est-ce que tu vois ça ? C'est donc le résultat que nous avons obtenu, mais ce n'est pas agréable pour les yeux. Nous devons faire quelque chose ici dans VS Code. Bon, allez au CSS de la maison. Je ne pense pas que nous ayons besoin de cette hauteur ici. Mettez en surbrillance puis essuyez-le. Enregistrez-la sur le navigateur une fois de plus. Jetez un coup d'œil. Superbe. Je l'aime bien. Est-ce que tu vois ça ? Également ? C'est souvent pour cette conférence. voit lors de la prochaine conférence. 14. Maintenir la structure de projet et le nettoyage du code: Nous devons maintenant nettoyer le code ou maintenir la structure de notre projet. Code VS horizontal sauf si vous continuez. Ouvrez l'explorateur. Je veux vous montrer quelque chose ici. Dans le répertoire personnel. Nous avons le profil CSS puis le profil JS. Et ces deux dossiers, ils ne sont pas à leur place. Bon, nous devons donc créer un paquet séparé pour cela. Cliquez maintenant avec le bouton droit sur le répertoire personnel ici sur New Folder. Et cela s'appellera profil. Nous allons donc les déplacer dans le package Profile. Cliquez sur Glisser, puis déposez-le dans le profil. Et voici la boîte de dialogue. Il est écrit, êtes-vous sûr de vouloir déplacer le Profunda CSS dans le profil ? Pour être d'accord avec cela, vous devez cliquer sur Annuler, Déplacer l'embarquement et récupérer le profil GAS, faire glisser et le déposer directement dans le paquet de profil. Et bien sûr, bougez. Il y a donc des problèmes ici dans le terminal, simplement parce que nous avons maintenant une importation manquante. D'abord. Nous devons nous diriger vers la maison GAS. Voici le profil. Maintenant, je vais faire le profil oblique J S, Save. Et ici, sur le terminal, on dit que les pays d'entre vous voient cela. Nous devons revenir au profil CSS, non corrigé, les importations manquantes. Faites défiler vers le bas Par conséquent, ici, nous devons déménager. Encore un pas en avant. Économisez. Et l'os. Problème résolu. Si vous écrivez une application comme celle-ci, elle devient très facile à lire et à comprendre. Ok, donc je vous apprends exactement comment calculer une application comme un pro. Navigateur actuellement à moins de voir si tout fonctionne bien. Tout fonctionne comme prévu. J'adore ça. Très bien. Prenez soin de vous. 15. Rendu de composant: Dans cette conférence, je vais vous apprendre à rendre les composants manière plus parfaite et plus organisée afin qu'il devienne très facile d'obtenir le nom de l'écran et l'ID de l'écran lorsque nous commençons à implémenter le défilement fluide . Cela implique que tous les écrans seront mappés dans un seul composant et que seul ce composant sera affiché sur l'application. Ça a l'air délicat, non ? OK. Permettez-moi de vous montrer ab.js actuellement. Au cours des conférences, nous allons avoir quatre à cinq volets différents. Et ces composants seront rendus dans le fichier app.js, comme la façon dont vous voyez la maison d'un foin. C'est vrai. Nous allons donc avoir le témoignage, la raison du contact et le reste d'entre eux. Maintenant, ce que nous allons faire, c'est de mapper tous les écrans un seul composant, puis d' uniquement ce composant sur le fichier app.js. Très bien, donc nous n'avons pas besoin de le coder en dur comme ça. Je crois donc que, au fur et à mesure que nous procédons, Joel, le comprends assez bien. Cliquez avec le bouton droit sur SRC. Voici un nouveau dossier. Et ce dossier s'appellerait utilitaires. Ils sont dans les services publics. Nous allons créer un module sur les utilitaires ici sur New File. Et nous allons créer un module appelé common t dot js. Donc, dans ce module, nous allons importer du portefeuille conteneur slash home slash home slash home. Nous devons maintenant obtenir le nombre total d'écrans sous forme de podcasts. Et nous allons appeler cela un trait de soulignement total. Écrans. Réglez-le sur un tableau, n'est-ce pas ? Dans ce tableau, nous allons avoir l'objet. Ensuite, nous aurons les paires de valeurs clés. Colonne de nom de soulignement d'écran. Le nom de l'écran est « Accueil » et le composant est d'origine. Par conséquent, à l'avenir, nous aurons tous les composants stockés ici. Très bien, permettez-moi de vous montrer, par exemple, supposons que nous ayons le composant CV et que je vais le faire est dupliqué et que la moyenne va être reprise. Ensuite, le composant va être repris. Il suffit donc de l'importer en haut, juste là. Ainsi, lorsque vous faites cela, vous aurez été stocké directement dans ce tableau. OK ? C'est un point le plus simple. Je n'ai qu'à défaire. Nous devons maintenant effectuer un titrage pour obtenir les écrans disponibles. Donc ici, je vais faire une const spot, obtenir un soulignement, un indice de soulignement. Nous allons prendre l'écran Nim, nom de soulignement de l'écran. Et ici, nous allons vérifier si le nom de l'écran n'existe pas. Si le nom d'écran n'existe pas, nous devons renvoyer moins un, ce qui signifie qu'aucun écran de ce type n'est enseigné dans le tableau. Nous devons maintenant parcourir les tableaux d' écran et obtenir les écrans disponibles. Car je suis égal à 0 et j'ai moins de 22 écrans de longueur de point. Ensuite, il faut que je l'incrémente d'un. Donc ici, nous allons vérifier si nombre total d'écrans de I point Nim, nom d'écran, puis nous allons retourner l'écran lui-même. OK ? Ici, il suffit de revenir en riant. En sécurité, non ? La ligne imbriquée consiste donc à créer un composant. Cliquez avec le bouton droit sur le conteneur de portefeuille. Voici le portefeuille Container. Cliquez avec le bouton droit sur nouveau fichier. Nous allons maintenant créer un composant appelé Portfolio container dot js. Alors, je vais le faire, importons le total des écrans. Laissez-moi vous montrer ici. Est-ce qu'il souligne les écrans des utilitaires slash OT. La prochaine ligne consiste donc à cartographier le nombre total d'écrans pour qu'ils soient affichés à l'écran. Ok, donc je vais faire le le total point total des écrans, régler pour ouvrir et fermer les crochets. Si un composant de point d'écran existe , nous allons avoir screen.com. Donnez-lui un nom d'écran. Ouvrez et fermez l'écran de crochets bouclés, l'écran à points nommé. Indiquez le nom de l'écran de points de l'écran clé. Nous devons également lui donner une pièce d'identité. Capture d'écran, nom de soulignement d'écran. C'est vrai ? L'Europe était si proche que l'on se refermait. Et si elle n'existe pas. Il suffit donc de retourner un div vide ici. Donnez une clé à la div. Nom de soulignement de l'écran de points d'écran, puis fermez-le vers le bas. Magnifique. Enfin, nous devons invoquer cette méthode. Laissez-moi vous montrer cette fonction ici. Nous allons l'appeler ici même dans l'interface utilisateur. Donnons donc à cette div un nom de classe, un conteneur de portefeuille. Et juste ici, en prenant le support bouclé n, nos écrans, sauvegardez-la sur le app.js. Nous effacons ça. Nous devons donc importer des conteneurs de portefeuille, n'est-ce pas ? Il l'a refait automatiquement pour moi. Je dois juste l'essuyer. En fait, je fais ça pour que tout le monde puisse suivre. Et, euh, nous devrons juste importer un conteneur de portefeuille à partir du conteneur de portefeuille slash de conteneur de portefeuille. Et nous devons également essuyer la maison. Et tout ce dont nous avons besoin pour rendre ici c'est le conteneur de portefeuille. Fermez-le avec une étiquette à fermeture automatique. Enregistrez-la sur le navigateur et voyons ce que nous avons à bord. Rechargez. Rien n'est affiché à l'écran. C'est vrai ? Allons la voir sur la console. Et une carte fonctionnelle n'est pas valide en tant que carte de réacteur. OK. Code VS de Toronto. Puis il y a elle sur les OT communs. Tout est cool sur hé, portefeuille contient dit fonction, sont des gars corrects. Il s'agit d'une fonction qui doit avoir une parenthèse d'ouverture et de fermeture. C'est donc ce qui en fait une fonction sûre. Encore une fois, accédez au navigateur. Ils ont raison, belle. Tout fonctionne comme spectateur. J'adore ça. C'est souvent pour cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 16. Introduction à RXJS. Observables: Très bien, donc dans cette conférence, nous allons travailler sur les animations et le défilement fluide. Mais avant de poursuivre cette conférence, il est bon de savoir ce qu'est un observateur, un observable et un sujet dans notre USGS. Et après l'espèce, je vous donnerai le lien vers le site officiel de l'USGS afin que vous puissiez en savoir plus à ce sujet et explorer. Observateur. Dans les flèches G est un observateur, est-il un consommateur de valeur délivré par un observable ? Et les observables sont collection Lizzy Push de valeurs multiples. Le sujet est sujet dans notre USGS est un type spécial d' observable qui permet aux valeurs multidiffuser à différents observateurs. Très bien, c'est plutôt comme un événement et rencontrez-nous. Bien sûr, vous savez que l'émetteur d'événements maintient le registre des pécheurs différents. Très bien, laissez-moi vous le démontrer rapidement afin que vous puissiez avoir une image claire de ce dont je parle. Maintenant, lorsque je fais défiler vers le bas, vous réaliserez que le composant pilier s'intègre. Allons-y maintenant. Voyez-vous que le composant d'origine s'intègre ? Maintenant, l'idée est que cet effet, qui est observable, va être implémenté dans un seul module. Ensuite, nous aurons différents composants pour consommer cet observable en s'y abonnant. Pouvez-vous voir le témoignage, le contact avec moi ? Pouvez-vous voir comment il s'intègre ? Donc, tout cet effet est créé dans un seul module, puis nous allons consommer cet effet en y souscrivant. L'idée elle-même est donc observable et les observateurs sont la composante qui consomme cet observable. Nous pouvons donc maintenant dire que le composant Contactez-moi est un observateur et que le module fondu en effet est l'observable. Ça a l'air bien, non ? Superbe. 17. ScrollService: Je n'ai pas compris le concept de l'USGS lors de la conférence précédente. Dans cette conférence, nous allons procéder à la mise en œuvre du code. Donc Heron au terminal et installons un USGS. Nous devons cd client, puis npm installer les erreurs GAS. L'installation est en cours. Nous devons donc l'attendre. Installé. Succès. Et il suffit de les ignorer pour l'instant. Cliquez avec le bouton droit sur les utilitaires ici sur New File. Ensuite, nous allons créer un fichier appelé cross service dot js. La première inconnue que nous allons faire ici est d' importer l'écran total. Importez le nombre total d'écrans de soulignement à partir d'OTA courants. Et la ligne descendante NES consiste à importer le sujet de notre USGS. Et si vous vous rappelez lors de la conférence précédente, je vous ai dit que le sujet est un type particulier d' observable qui permet aux valeurs d'être en mode multidiffusion, ce qui implique cet observable spécial que nous allons create serait consommé dans différentes entreprises et en s'abonnant à manger. Il suffit donc d'importer des sujets de REXX. Spot, la quatrième classe, faites défiler les CV. Nous allons maintenant avoir cet objet multiservice. Ses amis ont commencé. Point-virgule du gestionnaire de défilement. Au fait, je ne pense pas que cela soit nécessaire. Nous allons maintenant instancier le sujet. Nous devons donc créer l'objet ou la référence. Et maintenant, nous allons l' appeler diffuseur d'écran actuel. Un nouveau sujet. Et de même ici, nous allons faire un nouveau sujet statique, en cours de décoloration de l'écran. Nous allons maintenant avoir un constructeur ici et ajouter les événements de défilement à la fenêtre. Point de fenêtre, ajoutez un écouteur d'événements. Ce point. Juste ici. Nous allons mettre en œuvre la fonction appel à la navigation de plaisance. Et laissez-moi vous montrer. Voici l'appel à l'action à l'avortement. Lorsque vous cliquez sur ce bouton, il va faire défiler en douceur jusqu'au composant Contactez-moi. Et le nom de cette fonction va être scrotal. Engagez-moi, réglez notre fonction. Et c'est ce que nous allons faire. Laissez-moi me contacter, filtrer le point de document, obtenir élément par ID. Ensuite, nous allons obtenir l'identifiant de l'écran de contact avec moi. Dans ce cas, espace de contact. Mes amis ici, vous devez suivre mon exemple. Donc, si vous faites quelque chose comme ça, cela risque de ne pas fonctionner pour vous simplement parce qu'à l'avenir, l'ID de l'écran sera ainsi. Espace de contact. Ils ont raison. Et si l'écran n'existe pas, il faut le mettre fin ici. Et si c'est le cas, nous allons me contacter, écran, DOD, faire défiler vers la vue. Et le comportement. Ça va être lisse. C' est donc ce qui rend ça lisse. Faites défiler K, nous progressons et j'aime ça. Ce que je vais faire en ce moment, c'est de dupliquer cette méthode, ce type ici. Nous allons donc en avoir pour la composante maison. Laissez-moi vous montrer rapidement. Pouvez-vous voir ce bas ici ? Cela ferait donc défiler jusqu'à l'os du composant d'origine. Pouvez-vous le voir ? Magnifique. faut donc lui donner un nom. Ce serait donc attrapé. Faites défiler jusqu'à la maison. Ici, on va être à la maison. Nous allons changer ce nom de variable en écran d'accueil. Maintenant, ce que je vais faire, c'est d'appuyer sur Commandement et D. Appuyez encore une fois dessus. Pouvez-vous voir que le montage multiculturel est très agréable. Maintenant, je vais l'effacer. Nous allons donc demander à l'écran d' accueil d'appuyer sur la touche Echap pour désactiver le multi-causal. Joli. Cela étant fait, nous allons vérifier si l'élément est visible. Cela implique simplement si le document apparaît complètement à l'écran ou non. Alors sortez de cette fonction. Et ici, nous allons avoir son élément en vue LM k. Nous allons avoir une variable appelée Req est égale à L m point. Faites rect client, excusez-moi, l'œil d'un cheveu. Coupez ça. Cette méthode de I renvoie ici un objet DM direct fournissant des informations sur la taille d'un élément et sa position par rapport aux quelques pots et aux quelques pots. Phase plus simple de la partie du document que vous visualisez actuellement, qui est actuellement visible dans sa fenêtre. Et ici, nous allons avoir un haut des éléments variables, un haut l'élément, un point req top. Et ici, nous allons avoir un élément variable en bas, point req, je suppose que vous savez, en bas. Voyons donc ce que l'élément est partiellement visible. Nous allons partiellement faisable en haut de l'élément. Ainsi, lorsque le haut de l'élément est inférieur au point Windows en hauteur et que l'élément inférieur est supérieur ou égal à 0. Cela signifie qu'il est partiellement visible. Très bien, nous devons donc vérifier si le tout est visible. Laissez complètement visible. Le haut de l'élément est supérieur ou égal à 0 et le bas de l'élément est inférieur ou égal au point de fenêtre en hauteur. Maintenant, nous allons avoir une jolie affaire. Si la casse est partielle, nous reviendrons partiellement visibles. Ce type ici, excusez-moi, c'est Coulomb. Et si la case est complète dans la colonne, nous reviendrons complètement visible. Et ici, nous allons avoir la case par défaut fausse. Il y a une flèche ici, simplement parce qu'il faut qu'il s'agisse d'un point-virgule pour fermer cette affaire. C'est vrai. Nous allons maintenant vérifier l'écran qui se trouve actuellement dans la fenêtre d'affichage, ce qui signifie que l'écran est entièrement affiché. Nous allons donc avoir une fonction ici. Vérifiez le correspondant du port de vue. Nous avons examiné un événement de notre fonction. Très bien, donc il suffit de taper le code avec moi, donc je dois tout expliquer. Laissez-moi vous montrer. C'est le cas ici. Et puis ce point est un élément en vue. Ensuite, nous devons montrer l'affaire Porsche. Ce type, juste ici. S'il est entièrement visible. Partiellement visible. Donc, si l'écran est partiellement visible, ce qui signifie que s'il n'est pas complètement rendu, nous devons diffuser le flux en vigueur. Maintenant, je vais faire le point actuel de l'écran en point. Prochaine. Voici une méthode et ensuite nous devons prendre objet vide et la méthode du nid. Excusez-moi. La méthode suivante est utilisée pour insérer de nouvelles valeurs dans le sujet et faire en sorte qu'il diffuse en multidiffusion aux observateurs inscrits pour écouter le sujet. Donc, dans ce cas, il va provenir d' un composant différent. C'est tout à fait explicatif fait et enfin, s'il est complètement visible. Donc, si le composant est entièrement rendu à l'écran, nous devons diffuser le nom de l'écran, le point, le point. Et nous devons prendre ça sur l'objet d'un cheveu. Et on va faire écran dans la vue coelom, écran, nom d'écran. Ensuite, nous devons sortir de ces coffres-forts. Je la merde, non ? Nous nous sommes parfaitement bien débrouillés ici. Alors, lorsque nous commençons à consommer ce travail d'observables comprendrez certainement assez bien. Très bien. Prenez soin de vous. 18. Module d'animations: Dans cette conférence, nous allons procéder aux animations. Cliquez avec le bouton droit sur les utilitaires ici sur New File. Et puis cela s'appellera animations dot js. Ensuite, nous devons exporter la classe par défaut. L'animation est un crochet bouclé ouvert et fermé. Et ici, nous devons instancier la classe d'animation. Et la référence de l'objet s'appellerait animations. Point-virgule des animations pour y mettre fin. Et au fait, varie, facultatif. Ensuite, nous allons avoir une fonction qui s'adapte à l'écran. Cette fonction va donc prendre en compte l'ID de l'écran, qui est le nom de soulignement de l'écran , le définir sur notre fonction et passons au portfolio GS. Je veux donc vous montrer la pièce d'identité et la coiffer. Vous voyez ? Maintenant, nous allons avoir une variable, un écran. Document point, récupère l'élément par ID. Nous devons avoir l'idée de l'écran. Et si je, hé, nous devons vérifier si l'écran n'existe pas. se trouve donc que nous l'avons fait, puis nous devons y mettre fin. Et s'il existe, faut le styliser. Donnez-lui cinq. Ensuite, nous allons nous transformer. Nous devons traduire Y, qui provient de l'axe Y. Un. Photos. 19. Installation de paquets et mise à jour de écran: Bienvenue dans les voitures. Ils ont raison. Dans cette conférence, nous allons commencer à implémenter le composant d'en-tête. À la fin de cette conférence, nous aurons les éléments de la maison ressembler à ceux-ci. Comme exactement ce que vous voyez affiché à l'écran. Code VS Toronto. À moins de continuer. Pour continuer, nous devons suivre la structure du projet. OK ? Cliquez avec le bouton droit sur la maison d'un nouveau dossier de héros. Et ce dossier s'appellera Head. C'est vrai ? Dans le paquet d'en-tête. Nous devons créer le composant d'en-tête. Ensuite, ici dans un nouveau dossier. Et ce serait un en-tête de carte. Créons le fichier CSS correspondant. Point d'en-tête CSS. Mme. Générez le composant fonctionnel. Magnifique. Nous devons maintenant installer les paquets nécessaires. Accédez au répertoire des matériaux, aux matériaux, puis faites défiler vers le bas. Très bien, donc ici j'ai une police que nous voulons installer. Maintenant, je vais prendre une première ligne de copie Heron dans le code VS. Ici, nous devons voir le client. Et puis npm install la commande V pour la coller sur les matériaux et ensuite copier la deuxième ligne. Je suis ici, npm installe coller. Allons l'installer, MPL installé. Et je sais que la plupart d'entre vous sont curieux de savoir pourquoi je fais ça comme ça. Pour la ligne de panne, npm install, commande V pour coller. Enfin, NPM installe. Nous en avons fini avec l'installation. Donc, si vous voulez tout installer en même temps, il vous suffit de copier comme ceci. Et puis venez ici, installez npm puis collez. Je l'ai donc fait à ma fin, mais cela n'a pas bien fonctionné pour moi. Allons sur le paquet JSON lourd. Vous voyez ? OK. Commençons maintenant par les importations. Nous devons importer le nombre total d'écrans de soulignement. Et nous allons également importer mais obtenir un écran de soulignement, indice de soulignement des utilitaires, des boues, des lattes communes. Nous obtenons donc tous ces onglets ici à partir du module OTS commun. Vous devriez le savoir. Importons le service d'entiercement depuis. Ok, importons l' Awesome Font, icône Awesome Font, Awesome à partir de. Et comme tout ce que nous devons importer. Déclarons maintenant les variables d'états nécessaires à utiliser. Et ici, nous allons avoir Const. Sélectionnez cet écran, réglez. Écran, définissez-le pour utiliser l'état. Et l'état initial sera 0. Juste avant de continuer, nous devons importer les États-Unis di dt. Nous allons donc utiliser l'état. Nous devons définir l'émission, avoir une option, vous la définir, indiquer que l'état initial va être faux. Nous allons maintenant définir une fonction pour mettre à jour l'écran, le définir sur notre fonction. Et ici, nous allons choisir dans l'écran actuel. Nous allons donc avoir une variable ici. Index d'écran. L'index de l'écran. Maintenant, nous allons faire une vue de projection de Queen Dot Coréens. Si l'indice d'écran est inférieur à 0. La prochaine ligne est donc de souscrire à l'étape observable en dehors de cette fonction. Ensuite, nous allons avoir une variable. Abonnement à l'écran coréen, point de service de défilement, podcast pare-brise. Laissez-moi vous montrer. Ensuite, nous devons régler quatre V. Et voici la Casta, l'objet ou les amis de la classe. Laissez-moi vous montrer ici. Et où est-il ? Dot. Nous devons souscrire à l'observable. Et puis nous allons prendre en charge l'écran actuel de mise à jour de la fonction , ce gars ici. Très bien, je ne veux pas que cette conférence prenne trop de temps. Lors de la prochaine conférence, nous allons procéder à l'interface utilisateur. 20. Navigation de capteurs et de clic: Bon, alors passons à l'URI. L'Austin que nous allons faire ici est donc d'afficher les noms des composants sous forme de navigation. Vous pouvez donc voir le CV Home About Me et les autres. Mais nous n'avons pas créé tous ces composants. Pour l'instant, vous ne verrez que la maison affichée ici en haut comme navigation. Nous voulons donc le faire de manière dynamique. Par ici. Nous allons avoir une fonction pour le faire. Obtient les options Hara, définissez-la sur une fonction de flèche comme d'habitude. Et ici, nous allons retourner les crochets ouverts et fermes. Nous allons cartographier, dessiner le total des écrans Commandement P. et ensuite je vous emmènerai dans les communautés. Et voici le total des écrans. Ainsi, partout où les composants sont enseignés ici, nous les afficherons en haut comme navigation. Donc, ce que nous allons faire en ce moment, c'est de cartographier le nombre total d'écrans. Carte des points des écrans totaux. Donc ici, nous allons avoir une div, lui donner une clé de nom d'écran, de soulignement d'écran, de nom d'écran. Laissez-moi vous montrer rapidement. Conteneur de portefeuille de Toronto. Et voici la clé. Parfait. Je vous l'ai dit, Joel, je comprends vraiment tout. Donc oui, ça arrive. Maintenant, donnons à cette div un nom de classe, obtient l'en-tête classe facultative. Nous devons donc spécifier OnClick pour qu'il puisse être cliquable. Ainsi, lorsque vous cliquez sur l'un des noms, il doit basculer sur le composant correspondant. Laissez-moi vous montrer. Prenons, par exemple, je veux cliquer sur le bouton À propos de moi. Vous ramène au composant À propos du simple. Donc, le clic va être un noyau, ouvrir et fermer des crochets bouclés. Et plus tard, nous aurons une fonction appelée écran de commutation. Donc, dans le DV, nous devons couvrir le nom de l'écran. Nom de l'écran, du soulignement de l'écran. Ils seront donc affichés à l'écran. La prochaine fonction, nous allons avoir une étape des options d'en-tête d'obtenir. Ensuite, nous allons définir une fonction ici pour traiter les options d' en-tête afin de créer des espaces entre l'écran et de se moquer du nom des composants sélectionnés aurait une couleur différente. Cela viendra quand nous commencerons à le styliser. Donc ici, nous allons obtenir la classe d'options d'en-tête, qui est l'enregistrement fonctionnel ici. Cette fonction, si l'index est défini, affiche la longueur totale des points moins un. Et nous allons avoir des classes plus tiret, tiret, séparateur. Et si vous êtes sélectionné Index d'enregistrement de l'écran , les classes seront égales. En-tête sélectionné en option. Donc, ici même, s'il y a plusieurs écrans affichés en haut comme navigation, nous devons créer de l'espace entre les navigations. Permettez-moi de vous montrer ici que vous avez la Maison, puis l'espace entre la maison et le sujet de moi et de ce qui précède à leur CV, jusqu'au témoignage, puis au contact avec moi. C'est donc ce dont nous parlons ici. Et l'intention ici est de faire marquer le nom du composant comme sélectionné lorsque vous cliquez dessus. Pouvez-vous voir maintenant que le document À propos de moi est sélectionné lorsque je clique sur notre CV. J'ai foiré. Vous voyez ? C'est vrai. C'est donc exactement ce que nous essayons de réaliser des voies 41 à 42. OK. La prochaine ligne consiste donc à mettre en place un basculement entre les écrans. Et maintenant, nous allons avoir une fonction pour cela. Et je vous l'ai déjà dit, l'écran de commutation, l'interrupteur. Passons à l'écran composant. Document point, récupère l'élément par ID. Nous devons obtenir l'identifiant de l'écran. Capture d'écran, nom de soulignement d'écran. Les composants Scream n'existent pas. Et si c'est le cas, nous allons faire défiler le point du composant de l'écran vers la vue. Le comportement va se dérouler sans heurts. Et vous le savez. Nous allons maintenant définir l'écran sélectionné. Très bien, commençons maintenant à implémenter l'interface utilisateur. Je pense que ça devrait être enveloppé dans un support. Gros plan sur cette div. Ici, nous allons avoir un sous-def, lui donner un nom de classe de tiret d'en-tête. Et nous allons avoir une div avec un nom de classe : tiret, hamburger, et cliquez sur Afficher les options. Donc, ce que nous essayons de mettre en œuvre en ce moment, permettez-moi de vous montrer ici. Il n'affiche pas d'iPad Pro, il doit donc apparaître sur les plateformes iPhone et mobiles. C'est donc exactement ce que nous essayons de mettre en œuvre. Voyez-vous cet humble ici dans le coin supérieur gauche de l'écran ? Et j'espère que vous pouvez voir que le nom de la classe, en-tête dash 100 barrettes de burger. Et puis l'icône. Nous allons utiliser ce type. Laissez-moi vous montrer ça ici. Il faut qu'il vienne ici et coller près de l'Europe était la balise auto-fermeture. Et sortez de cette plongée avec le nom de classe Header Hamburger. C'est la div ici, et voici la balise de clôture. Juste après la balise de fermeture, nous allons avoir une div, lui donner un nom de classe de tiret d'en-tête, logo. Très bien, dans cette div, nous allons couvrir le logo. Donc, si vous avez un logo, vous pouvez aussi utiliser le logo ici. Comme si vous pouviez faire quelque chose comme ça. Donc, si le logo est sous forme d'image, vous pouvez faire IMG, SRC, ok, puis cibler l'emplacement de l'image. Mais pour moi, je veux juste envoyer un spam sur le logo. Dans ce cas, ce sera mon nom. Ici. Je pense que nous allons nous en tenir à ça. D'accord, et c'est l'enseigne de Giotto sur mon clavier près du bar. Donc, juste après la div de clôture du nom de classe, de l'en-tête, du logo , du ciel, nous allons avoir une autre div avec le nom de la classe. Show avait une option. Et cette fois, nous allons l'afficher sur une condition. Donc, s'il existe, nous aurons ici des options de tiret. Afficher les options de tiret et de tiret. Donc ici, nous allons appeler la fonction obtenir des options d'en-tête. Laissez-moi vous montrer ça ici. Économisez moins de coup d'envoi de l'application. L'en-tête n'est pas affiché à l'écran. Revenez, puis nous devons le rendre dans le JS de la maison. Ici, nous devons importer depuis. Et encore une fois, assurez-vous que la tête est en haut du profil. Maintenant, elle est sur le navigateur. Rechargez. Maintenant, l'en-tête se trouve à l'écran. Laissez-moi vous montrer. voyez-vous ? Dans le coin supérieur gauche de l'écran, vous verrez le logo et le nom du composant d'accueil affichés comme navigation. Voici donc le composant home et voici le logo. Ainsi, lors de la prochaine conférence, lorsque nous commencerons à styliser ce composant, tout sera parfait. 21. Styler le composant de l'en-tête: Commençons à styliser le composant d'en-tête. L'héroïne a mis VS Code. Et avant de continuer, nous devons faire quelque chose, ouvrir Hadar JS. Ici, nous devons changer le nom de la classe pour diriger un conteneur de tableau de bord. Cela étant fait, passons à l'en-tête CSS. On l'a dit, ok, hé, est-ce le conteneur d'en-tête ? Nous allons avoir une flexibilité d'affichage. Justifions le contenu au centre. La hauteur, 140 pixels, la couleur de la police. Il va être blanc. Et ici, nous devons styliser la tête ici et oups, c'est censé être un point. Rapidement. Faisons en sorte qu'il affiche un espace flexible entre lui donnant une hauteur de 100% de 70 %. Et la couleur de la police. Il va aussi être blanc, donc je dois juste prendre ces pâtes. Travaillons sur le logo. La taille du téléphone est de 50 pixels. La famille des téléphones Poppins, très audacieuse. La couleur de la police va donc être blanche. Il suffit de saisir ces pâtes en toute sécurité. Et s'il vous plaît, assurez-vous que votre fichier CSS est déjà lié au composant. Nous l'avons fait lors de la conférence précédente. Nous avons accédé au navigateur et nous allons le vérifier. Pouvez-vous voir de belles choses ? Il a l'air bien. Et puis voici le hamburger Hara. Ne vous inquiétez pas, nous aurons tout aligné correctement. Le MNIST est donc l'option d'en-tête. J'ai eu un soupçon de schistes. Disposez d'un écran flexible. Alignons les éléments au centre. Et nous devons également styliser l'en-tête. Option. A lui donne une taille de police de pixels système. Le coût sera donc de 0,600. Elle sur le navigateur. Et laissez-moi vous montrer que vous pouvez voir l'en-tête ? Faisons quelque chose. Voyez-vous que c'est dans le coin supérieur gauche de l'écran ? Nous voulons les montrer sur les plateformes mobiles. ligne occidentale est l'option d'en-tête, tiret séparé de 0 point. Je peux l'attraper d'ici. Séparateur, donnez-lui une marge de 50 pixels. Et ici, nous allons lui donner une couleur. La couleur va donc être blanche aussi. Il va s'emparer, puis le coller ici. Dialysons maintenant l'en-tête, l'option, le point, tiret sélectionné, l'option tiret sélectionné. Et il ne reste plus qu'à préciser la couleur. On peut vraiment coder en dur ici. C'est donc ce qu'il y a ici. Vous voyez ? C'est exactement ce que nous avons mis en œuvre en ce moment. Vous ne le verrez donc pas ici simplement parce que nous n'avons que la maison affichée en haut comme navigation. Ainsi, lorsque nous commencerons à ajouter d'autres composants, vous verrez l'effet. Jetons un coup d'œil sur les plateformes mobiles. Voyez-vous que ce n'est pas du tout réactif ? Pouvez-vous le voir ? Ainsi, lors de la prochaine conférence, nous rencontrerons la tête réactive sur les plateformes mobiles. voit lors de la prochaine conférence. Restez concentré. Et TK. 22. Réceptivité du courant: Passons à la réactivité mobile. Vous devez vous accrocher pour engager un CSS. Ensuite, nous allons commencer par l'iPad Pro. Ainsi, à l'écran multimédia et à la largeur maximale de 1, 1, 1, 0 pixels, soit la taille de l'iPad Pro. Maintenant, nous allons avoir la tête là-haut et lui donner une largeur de 80 %. Mettez en surbrillance, copiez, collez, fermez le crochet bouclé. Et ici, nous devons changer la taille de votre écran à 970 photos. Nous allons avoir un bloc d'affichage. Enregistrez-la sur le navigateur. Rechargez. Pouvez-vous voir maintenant que le hamburger apparaît dans le coin supérieur gauche de l'écran ou à droite. Tout va certainement être cool. Toujours sur la taille de l'écran, nous voulons le parent de l'en-tête. Nous avons 100 %. Mettons-le en position. Absolue, la gauche, ma perte, 100 %. Les pixels supérieurs lui donnent une hauteur de 100 et une largeur de 100 %. Justifions le contenu. Espace autour. Et puis l'arrière-plan, qui est le curseur lui-même. Quand il s'agit de la scène Clyde, nous voulons que l'arrière-plan soit 1, f, 22 , 35, l'index z, l'opacité. Faisons 0,5. Coffre-fort. Nous allons avoir une transition, soulignez-le. Et puis pour l'option d'en-tête séparée ou DOD. Hé, est-ce que ça donne une marge de l'en-tête sélectionné ? Dot, tiret, tiret, barres. La taille de police est 30. Les photos devraient être pointues. Et la marge 0 pixels, dix photos. Ici, il suffit d'emprunter cette couleur d'ici. Collez-le ici. Peut-être que nous rembourserons plus tard. Je ne sais pas. Ici. Afficher le tableau de bord, le hamburger, l'option. Les gars. Sortons ça et voyons si tout fonctionne parfaitement bien. Rechargez Qu Gary, tout fonctionne comme prévu. Maintenant. Vous voyez ? Parfait, j'adore ça. Voyez-vous ? Essayons donc sur iPhone 6, 7 et 8, 2 x trouver. Sur iPad Pro. Vous voyez que nous avons la navigation et maintenant la tête d'un hamburger 100 a disparu. Mais quand vous allez sur iPad, nous aurons la tête, un hamburger. Vous voyez ? Mes amis, tout fonctionne comme prévu. Très bien, donc nous avons fini avec le composant d'en-tête gagné à l'avenir, vous allez voir comment nous allons afficher les noms du composant en haut sous forme de navigation. Donc, vous aurez le témoignage de reprise ci-dessus, contactez-moi et tout cela. voit lors de la prochaine conférence. Restez folkloriste et prenez soin de vous. 23. Composant réutilisable: Dans cette conférence, nous allons créer la composante raisonnable. Un composant réutilisable est un élément d' interface utilisateur qui peut être réutilisé dans une autre partie de l'application vers Butte plus d'une instance. Très bien, laissez-moi vous emmener au projet de démonstration. Faites défiler vers le bas Voici les composants réutilisables, qui comprennent le titre, le titre et le séparateur, qui est cette ligne ici. Pouvez-vous voir de belles choses. Maintenant, une chose que j'aime le plus dans le composant réutilisable, c'est sa flexibilité. Cela est donc utilisé ici dans le composant À propos de moi pour afficher le titre À propos de moi et chaque sous-titre, qui est la facilité à propos de moi, puis la facilité de sous-titre. Pourquoi me choisir ? OK. Maintenant, quand cela serait réutilisé dans un autre composant, permettez-moi de vous montrer. Dans ce scénario, nous avons donc le CV. Nous allons donc lui transmettre valeur différente au composant réutilisable. Voyez-vous maintenant la raison pour laquelle j'ai dit que les composants réutilisables sont flexibles. De plus, mano a mano Microsoft s'intègre dans différents composants tels que le témoignage. Nous devons modifier la valeur qui sera transmise au composant. Très bien ? Dans ce cas, voici le témoignage en tant que titre, et voici le sous-titre. Très bien, alors plongeons dans le code et nous devrons le comprendre assez bien au fur et à mesure. Héroïne à VS Code of a. Hé, nous allons créer un répertoire appelé sous-titre. Maintenant, il suffit de cliquer avec le bouton droit de la souris sur les utilitaires. Le voici. Pouvez-vous voir le bouton droit de la souris ici sur Nouveau dossier. Maintenant, nous allons créer le composant ici sur New File, en-tête d'écran dot js. Générons le composant fonctionnel. Nous allons donner à cette div un nom de classe de tête dans un conteneur de tableau de bord, excusez-moi, écrivez juste sur cette div. Nous avons besoin d'une autre div avec le nom de classe Screen Dodge. Vas-y. Et ici, nous devons couvrir le titre. Ouverture et fermeture des supports bouclés. Et je vais faire un titre de point d'accessoires. Et ici, cette fonction va lui prendre des sondes. Vous pouvez donc changer le nom des invites par autre chose. Mais je vous recommande de vous en tenir aux sondes de la convention simplement parce qu'elles sont généralement acceptées. Et beaucoup de gens, c'est ce qu'il fait. Alors, ce qui se passe ici, c'est que nous recevons simplement la valeur, n'est-ce pas ? Dans la prochaine conférence, vous allez voir comment transmettre de la valeur à ce composant par le biais de sondes. Le plus simple. Et nous devons vérifier la sous-position. Et ici, nous allons avoir le support bouclé. Puis ouvrez et fermez les parenthèses. Nous allons faire des sous-titres de points d'accessoires. Ainsi, comme d'habitude, nous recevons une valeur qui est transmise à ces composants par le biais de sondes. Dans ce cas, si une valeur est transmise ici, nous devons afficher cette valeur. Nous allons donc avoir une div, donner à la div un nom de classe de tiret d'écran, en-tête de tiret. Dans la droite. Dans cette div, nous devons couvrir cette valeur, qui est la sous-position. Je vais donc faire des accessoires, sous-titres et des flèches. Si aucun sous-titre est transmis à ce composant, nous devons afficher une div vide. Alors venez ici, Coelom, qui est les flèches, nous allons faire une div. Fermez-le vers le bas. En résumé, nous ne faisons que recevoir les données qui seront transmises par des accessoires à cette entreprise et ne vous inquiétez pas. Dans les prochaines conférences, vous verrez comment nous pouvons transmettre des valeurs à cette entreprise et à quel point c'est beau. Maintenant, elle est sur le projet de démonstration. Laissez-moi vous montrer ici, qui est le séparateur. C'est ce que nous allons faire maintenant. Cette ligne ici, nous allons juste avoir This is the Blob. C'est un peu au nord d'ici. C'est le blob. Pouvez-vous voir ce type ici ? C'est tout pour le composant réutilisable. Dans la prochaine conférence, nous allons styliser cette composante. OK ? On se voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 24. Styler Réutilisable réutilisable: Dans cette conférence, nous commencerons à styliser la composante raisonnable. À la fin de cette conférence, nous allons le faire ressembler à ceci. Pouvez-vous la voir bien ? Alors, passez rapidement au code VS, sauf si vous continuez. Cliquez avec le bouton droit sur le titre de l'écran. Voici un nouveau dossier. Et ce fichier s'appellerait tête d'écran dans dot css. Avant de continuer, il faut lier le composant au fichier CSS. Ouvrez l'en-tête de l'écran GAS, faites défiler vers le haut. J'y suis déjà au sommet. Maintenant, ce que je vais faire, c'est importer un en-tête d'écran dot css. Enregistrez-la sur l'écran ici en CSS. Et ici, nous allons commencer par la direction du conteneur. Laissez-moi vous montrer rapidement. Voici donc le titre contenant l'en-tête de l'écran, le tiret d'écran, le titre de tiret et ici le reste des classes. Passons donc à autre chose. Nous devons régler cela sur un conteneur flexible. La colonne de direction de flexion. Alignons les éléments au centre. La largeur, la marge de 100 %. Et ici, nous avons un tiret demi-écran, en-tête de tiret, un sous-titre. Nous allons maintenant avoir l'espacement entre les lettres de trois pixels. Marge. Comme le lait mange. Il mélange 18 pixels. Taille de police. Pixels. La couleur. Nous devons utiliser le colo que nous avons importé plus tôt dans la conférence du professeur. Et j'espère que nous pourrons nous en souvenir. Pour un en-tête d'écran, en-tête de tiret d'écran. Donnons la taille de police de 32 pixels. La couleur lorsque f, 22, 35. Et maintenant, vous devriez connaître cette couleur. La police, la famille, les Poppins, bateau, la tête et le séparateur, le cap, le tableau de bord. Séparateur. Nous allons avoir un flex d'affichage aligner les éléments au centre. La position relative. La largeur, 180 pixels, n'est-ce pas ? Pour la ligne de séparation, DOD, la ligne sous-totale, donnez-lui une largeur de 100 %, donnez-lui une hauteur de 200 pixels. Et la couleur de fond, nous allons utiliser cette couleur. Il faut donc que je grandisse et que je le colle ici. Laissez-moi vous montrer exactement ce que nous avons fait en ce moment. C'est ici, cette ligne ici. Je ne parle pas de ce type. C'est celui dont je parle, de cette ligne . Maintenant, pour le point blob séparé, nous devons maintenant le changer pour qu'il explose ici. Donnez-lui une hauteur de 10 pixels, une largeur de 100 %. La position absolue. Nous allons avoir un affichage, un flex, justifier le centrer, mettre en surbrillance, copier, coller, fermer le crochet bouclé. Ensuite, nous devons styliser la Div. Laissez-moi vous montrer cette plongée de foin. Si vite, nous devons lui donner une largeur de 35 pixels, rayon de bordure de 10 pixels. Et la couleur de fond. Pour ces Héron à la CSS. Nous devons utiliser la copie orange foncé. Revenez à la tête de l'écran en CSS, puis il vous suffit de payer. Ok, alors veillez ici, fermez l'espace. Coffre-fort. Maintenant, nous en avons fini avec le composant réutilisable. Et dans la prochaine conférence, nous verrons comment transmettre des données à l'écran direction GAS à travers les sondes sont à droite, ce type ici. Ainsi, lorsque nous rendons le composant réutilisable, les détails seront affichés à l'écran. Très bien, donc c'est souvent présent pour cette conférence et on se voit dans la prochaine conférence. Prends soin de toi. 25. Conception de composants de Me: Bienvenue à la cause. Très bien, nous allons maintenant commencer à travailler sur les composants À propos de moi. Et à la fin de cette conférence, nous aurons quelque chose de si beau comme celui-là. Jetez un coup d'œil. Très bien, revenez au code VS. À moins de continuer. Pour continuer, nous devons apporter les apports nécessaires. Cliquez avec le bouton droit sur les ressources. Ici, c'est ça ? Cliquez avec le bouton droit, cliquez sur un nouveau dossier. Et nous l'appellerons à propos de moi. Maintenant, ouvrez le dossier des matériaux. C'est juste ici sur mon bureau, donc j'ai juste 0 douleur, puis j'ouvre le portfolio pro client SRC, des actifs à mon sujet. Il suffit donc de copier l'image pertinente pour les composants À propos de moi et de la coller ici. Et voici son clic droit. Copier. Coller. Fermez-le, continuez vers le bas, revenez au code VS. La ligne suivante consiste à créer le composant correspondant, un fichier SCSS. Il suffit d'ouvrir le conteneur de portefeuille comme ça. Puis cliquez avec le bouton droit sur le bouton « À propos de moi ». Voici un nouveau dossier. Cela s'appellera About Me. Js crée le fichier CSS correspondant. A propos de moi Dot css. Revenez à propos de mon j est générique, le React est des composants fonctionnels. Et si nous devons importer l'effet américain et nid est d'importer le composant réutilisable. l'écran de démarrage des utilitaires, en-tête de l'écran de démarrage. Importons que ces corbeaux ont 0. Importons les animations. Magnifique. Maintenant, la ligne consiste à ajouter ces composants à l'écran. Ouvrez le fichier test.js commun. Et ici, nous devons importer les composants À propos de moi. Nous allons le stocker dans les constantes. Je n'ai donc qu'à les souligner. Maintenez les touches Alt et Maj enfoncées, puis appuyez sur la flèche vers le bas pour dupliquer. Magnifique. Il suffit donc de changer le nom à propos de moi. La composante concerne moi. Commandez S pour enregistrer. Maintenant, il suffit d'arrêter le serveur. Salut, pouvez-vous voir que le composant a été ajouté à l'écran ? Retournez au code VS fermé sous Common Law test.js. Donc, si cette fonction doit prendre des paramètres, invite et venir ici et donner à cette div un nom de classe à propos de moi. Les conteneurs concernent le tableau de bord, le conteneur de tableau de bord. Nous allons avoir une autre div avec le nom de classe à propos de MON parent. La prochaine ligne consiste donc à rendre les composants réutilisables. Titre de l'écran avec la balise à fermeture automatique. Et ce composant possède deux attributs différents. premier est le titre et nous devons lui donner une valeur. Je vais donc le dire. À propos de moi. Et l'autre est le sous-titre. Et ici, je vais faire pourquoi me choisir ? OK ? L'intention ici est donc de faire passer ces valeurs à la tête d'écran dans les entreprises et de les afficher l'écran lorsque le composant est rendu. Très bien, laissez-moi vous montrer. Il suffit de frapper sur la tête de l'écran en G, S. Et si je suis ici, vous pouvez voir que nous recevons les valeurs ici, voir le sous-titre de points des invites. Par conséquent, à l'aide de ces invites, nous attribuons une valeur à ce titre. Et symptôme ici, nous attribuons une valeur à la sous-rubrique. Par conséquent, si aucune valeur n'est attribuée, rien ne sera affiché à l'écran. Retournez au sujet de moi, GAS. Sauvez, courez. Retournez au navigateur, et regardons ça. Magnifique. Pouvez-vous le voir à propos de moi et pourquoi juste moi ? Tout fonctionne parfaitement bien. Et je crois qu'avec cela, vous pouvez comprendre clairement quelle est la composante raisonnable. La prochaine ligne consiste donc à s'abonner aux observables pour permettre effet de défilement et de décoloration fluide. Donc, je vais le faire, fondons dans le gestionnaire d'écran, prenant l'écran ici. Nous allons donc vérifier si l'écran de décoloration des points d'écran n' est pas égal à l'ID de point d'invite, alors nous allons le mettre fin ici. Maintenant. Nous devons mettre en œuvre pour l'effet de décoloration. Maintenant, je vais faire des animations. Animations, écran de décoloration des points. Laissez-moi vous montrer rapidement Heron à l'animation gs. Et voici la fonction d'écran de décoloration. Retournez au juge About Me , donc nous devons prendre la carte d'identité. Magnifique. Par conséquent, ici, nous devons nous abonner aux observables. La et moi allons faire un abonnement const. Faites défiler les CV, le point correspond ici sur cette croix F est composant et laissez-moi vous montrer à travers FSGS. Ok, voici le fondu de l'écran actuel, qui est l'objet ou les refrains de la classe de sujets. Très bien, faites défiler vers le bas. Permettez-moi de vous montrer ici où nous l'avons mis en œuvre. Voici donc son écran actuel en point suivant. Et ce que nous avons fait ici, c'est de diffuser l'effet de décoloration. Revenez au VGS ci-dessus. On va donc faire des points. Nous devons nous y abonner, nous abonner. Et ici, nous devons juste prendre le fondu dans Spring Handler. Finis, j'ai été manipulateur. Magnifique. Donc, pour vérifier si cela fonctionne parfaitement, nous devons passer à cette div avec le nom de classe du conteneur About Me. Donnez-lui une pièce d'identité. Props dot id commande S à enregistrer. Retournez au navigateur et regardons ça. Rechargez. Essayez-le en cliquant sur le bouton À propos de moi. En bas. Pouvez-vous le voir ? Tout fonctionne parfaitement bien ? Le voyez-vous ? Lorsque vous cliquez sur le bouton À propos de moi, le défilement en douceur jusqu' au composant pilier est exactement ce que l'intention est. Retournez au code VS. Nous allons donc afficher des informations statiques à l'écran. Pour cela, nous devons déclarer données non statiques et les stocker dans un cas contraire. Donc, ici, nous allons avoir une constante, appelons ça écran, soulignons, ouvrons et fermons des crochets bouclés. Et ici, nous allons avoir la colonne de description. Retournez au navigateur et laissez-moi vous montrer. Voici donc le site Web de démonstration et voici la description. Et je vais le faire maintenant est copier, revenir au code VS et ensuite le coller entre les guillemets séparés par une virgule avant que le nid et la ligne ne soient les surlignements, ce qui implique la liste des éléments. Et ici, la liste des objets remonte. instant, je vais faire des faits saillants. Nous allons donc disposer ici d'une zone de données à afficher à l'écran. Ouvrons et fermons les crochets. Et ici aussi, nous devons placer une colonne ici. Très bien, le premier de la liste. Sortons ça. Nous avons ici un développement web et mobile complet. Je n'ai qu'à copier. Viens ici, colle-le. Séparés par une virgule, revenez en arrière. Copier, collé entre le tribunal, séparément dans le coin. Pour éviter les répétitions, il me suffit de faire avancer rapidement la vidéo. Très bien, maintenant j'ai fini. Remplissez la liste. Vous devez également mettre en pause la vidéo à la fin et la terminer ici. Et maintenant, nous devons avoir la tête au-dessus de sa tête à Coulomb. Ouvrez les devis, revenez ici. Copiez, collez. C'est aussi simple que ça. La ligne consiste à définir une fonction à mapper à travers les données ci-dessus afin qu' elle soit affichée à l'écran. Je pense que je dois fermer le terminal pour avoir une pension complète. Ici, nous allons avoir exécuté les faits saillants, définir à notre fonction. Nous devons donc cartographier les constantes d'écran de ces données, les surlignements de points. Laissez-moi vous montrer. Points forts. Les balles, ok. Pointez des puces, ouvrez et fermez les crochets, puis ouvrez et fermez le crochet une fois de plus. Maintenant, nous devons aborder un argument si je le mets à notre fonction. Donc, ici, nous allons avoir une div avec le nom de classe des points forts. Et nous devons lui donner une clé pour éviter les doublons de valeurs. Et ici, nous allons avoir une autre div avec le nom de classe du blog surligné, faits saillants, du tiret, du blob, plus ça. Enfin, nous devons couvrir la valeur. Magnifique. Ok, donc pour une clé, quand vous faites ça, tout va parfaitement bien pour vous. Nous devons maintenant afficher les données sur l'interface utilisateur. Faites défiler jusqu'à l'endroit où nous avons l'interface utilisateur ici. Donc, juste après la composante raisonnable, nous allons avoir une autre div avec le nom de classe de Codd à propos de moi. Donnez le nom de la classe à propos de Dash, Dash Cod. Et nous avons également besoin d'une autre div avec le nom de classe de profil à propos de moi. À propos de Dash Me, profil Dash. Laissez-moi vous montrer. Voici le profil principal, cette image d'un foin. Et nous avons également besoin d'une autre div avec le nom de classe à propos de Dash, Dash Details. Assurez-vous toujours que les noms des classes sont bien orthographiés afin que vous ne rencontriez pas problèmes lorsque nous commençons à le styliser. Et ici, nous devons afficher la description et la brumer. Je vais donc nous donner un livre au nom de classe de Dash, description de tiret. Nous devons donc afficher l'article ici. Maintenant, je vais faire une description de points de constantes de soulignement d'écran . J'ai foiré. Laissez-moi vous montrer. Voici la description. Nous avons besoin d'une div avec un nom de classe à propos de Dash. Surlignements de tiret, nom de classe div surlignent tiret, en-tête. Juste ici. Nous devons couvrir le cap. Nous allons donc faire de l'écran sur les constantes de portée, le titre de surbrillance des points, le titre, le coffre-fort. Donc, je vais au client CD NPS. Marquez en baisse. Magnifique, tout fonctionne comme prévu. Voici donc la description. Mais je suis tellement surpris que le titre n'apparaisse pas. Retournez en arrière et voyons ça. Les gars, il y a une erreur dans le sort ici. C'est censé se diriger. Gagnez encore un temps, revenez en arrière. Très bien, voici le titre et vous voyez n. C'est la description. Affichons la liste des éléments. Donc, juste ici, après la div de clôture du titre de surbrillance de ClassName, nous allons appeler la mise en surbrillance du rendu de méthode. Sauf, retournez en arrière. Et voici la liste des articles. Magnifique. Le nid et la ligne sont d'avoir les protéines, Hey, retournez et prenez un foin. Juste après la div de clôture de ClassName à propos de moi les faits saillants. Nous allons avoir une div avec le nom de classe à propos de Dash, Dash. Nous pouvons donc maintenant avoir les corps. Ce que je vais faire en ce moment, c'est d'aller au composant de profil et de le copier à partir de la commande P hat pour fournir g, s. Donc le corps est copié, retournez à About Me gs et collez-le ici. Commandez S pour enregistrer. Retournez au navigateur et regardons ça. Faites défiler vers le bas Très belle phrase, c'est un résultat mortel que nous attendons de cette conférence. Je me suis rendu compte qu'ils ne sont pas beaux, mais bien qu'il ne ressemble pas à l'IDA, mais ne vous inquiétez pas. Lors de la prochaine conférence, lorsque nous commencerons à styliser ce composant, nous l'aurons parfaitement. C'est souvent le cas pour cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 26. Styling AboutMe Component: C'est exactement ce que nous avons obtenu lors de la conférence précédente. Et tout fonctionne parfaitement comme prévu. Démerdez quand vous chauffez la bombe intégrée À propos de moi vous emmène ici. Cela signifie donc que le Smooth Scroll est parfaitement parfait. Examinons une affaire dans la région intestinale. Et le bouton Obtenir Resume fonctionne également comme prévu. Magnifique. Donc maintenant, la prochaine ligne est de styliser ce composant habité ressemblant. Retournez au code VS, sauf si vous continuez. Ouvrez le CSS À propos de moi. Et ici, nous commencerions par le conteneur. Laissez-moi vous montrer. Ici, c'est ça ? Donc je dois juste appeler b point, coller ici, ouvrir et fermer des crochets bouclés. Et nous allons le faire afficher flex, flex direction, colonne, justifier le contenu à envoyer. Alignez les éléments pour centrer la marge. Nous allons donc avoir 50 pixels. Commande S pour enregistrer, revenir à la GS sont moins de lier le fichier CSS au composant. J'ai foiré. Et Hé, nous allons importer à propos de moi, pointer CSS, Enregistrer. Retournez au navigateur à moins d'être retiré. Vous voyez ? Très bien, continuons. Retournez à la page About Me. style Css est la classe parent DOD sur MES parents. Et nous allons lui donner une largeur maximale de 100 pixels. Et la largeur 70 %. The About Me, morue à propos de moi. Voyons un affichage de flex. La largeur est de 100 %. Box-Shadow. Enregistrez, revenez au navigateur. Tout prend progressivement forme. Je l'aime bien. Donc pour le profil À propos de moi, à propos de mon profil de tiret. Et ici, nous allons lui donner une largeur de 50 % de l'image d'arrière-plan. Ensuite, nous devons utiliser l'image que nous avons importée plus tôt lors de la conférence précédente. URL. Nous devons atteindre les atouts. affrontement à propos de moi. C'est le JPEG qui m'affronte. Et j'espère que vous vous souviendrez lorsque nous importons sur cette image la taille de l'arrière-plan. Faisons en sorte qu'il soit courbé. Arrière-plan, répétez, non, répétez la position d'arrière-plan. Allons avoir son centre. Économisez. Retournez en arrière. Et voici le profil. Revenez maintenant au code VS. Nous devons styliser le « À propos de moi », détails sur Dash Me. Et hé, on va lui donner une largeur de 48 %. Test aligné. Faisons en sorte que cela soit justifié. Ajout de 30 pixels. Économisez. Découvrez-le sur le navigateur. C'est cool. Allons-y. Par conséquent, ici, nous devons styliser la description À propos de moi. Donc je vais juste m'effacer. Description. Ici, j'ai appelé le support. taille de police de la description est de 12 pixels. Pour moi, les faits saillants. Donnons une marge en haut à droite. Sur les photos ici, nous allons avoir Sarah pour un point culminant détestant Dodd, Highlights , Dash, cap. Ici, nous allons avoir la famille de polices. Poppins, bateau. Taille de police, 14 pixels, marge. Et ici pour le point culminant, le point, les points forts. Faisons en sorte qu'il affiche flex. Alignez les éléments au centre. La marge. Cinq pixels, 0. Enfin, pour une taille de téléphone, nous allons le sécuriser. Découvrez-le sur le navigateur. Ça a l'air génial, j'aime bien. Pouvez-vous le voir ? Allons-y. Le nid et la ligne sont donc d'afficher une balle ici, qui est la tache de surbrillance. Je vais donc mettre en surbrillance Dash Blob. La hauteur sera la rubrique utilise la largeur, 12 pixels, la marge, 010 pixels et la couleur d'arrière-plan. Nous allons donc avoir 5823. Économisez. Retournez en arrière. Et voici la piscine ici, qui est le blob surligné. Mais je n'aime pas la façon dont ça ressemble à un rectangle pour l'instant. Nous devons changer. Ça ressemble encore plus à une sorte de trucs, non ? Faisons-le donc rapidement. Il est donc très simple de le faire. Maintenant, tout ce que nous avons à faire, c'est d'appliquer le rayon de frontière et de le rendre sûr à 50 %. Retournez en arrière. Ici, ce n'est pas si beau ? Génial. J'ai aimé ça. Et si j'ai entendu dire que vous avez réalisé que les bouteilles ne respirent pas du tout, alors vous voyez qu'il n'y a pas d'espace entre les corps. Retournez en arrière et réparez ça rapidement. Ici, nous allons parler des options Dash Me. Ensuite, nous devons cibler le BTA mis en évidence. nous suffira donc de spécifier la marge. Donc, en haut à droite, en bas 0, puis à partir de la gauche, nous avons 30 pixels. Jetez un coup d'œil. Pouvez-vous le voir ? Magnifique. Tout fonctionne comme prévu. Prenons donc une plateforme mobile Atom et voyons si elle est réactive. Ok, c'est comme ça qu'il apparaît sur iPad Pro. Il n'est pas réactif. Pouvez-vous voir que l'avortement va bien. Sortons ça sur iPhone. Jetez un coup d'œil. Voyez-vous que je n'aime pas ça comme ça. Très bien, sortons ça. Boom. Tout fonctionne comme prévu. Mais pour la réactivité mobile, nous devons travailler là-dessus. C'est donc tout pour l'instant, pour cette conférence. Très bien, prends soin de toi. 27. À propos de Me Component Responsive: Parfait Cette entreprise est en la rendant réactive, revenons à VS Code. Et ici, nous devons commencer par l'iPad Pro comme d'habitude. Donc, un iPad Pro, une réactivité iPad Pro. Ainsi, la reine pour iPad Pro est de 11 pixels. Alors ici, je vais faire le DOD à propos de moi, de payer le taux. Nous devons lui donner une largeur de pourcentage. C'est donc tout pour l'iPad Pro et pour les autres plateformes mobiles. Maintenant, je n'ai plus qu'à les copier. Copier. Venez ici, collez, fermez le support bouclé, puis venez à cet endroit sans changement. Les pixels. Ici, nous avons huit pixels pour sa reine plus petite que l'iPad Pro. Donc quand c'est le cas, oui, ici sur la plateforme mobile, nous voulons désactiver l'EMH. Donc je vais le faire, jouer, sauvegarder et courir, retourner au navigateur et à l'os, l'image a disparu. Magnifique. Nous devons donc maintenant faire les détails pour occuper le reste de l'espace. Retournez faire ça. Hé, je vais juste faire le DOD à propos de mes détails anéantis. Faisons en sorte que la largeur soit 100%. Enregistrez et courez. Pouvez-vous voir ce noyau ? Retournez en arrière et continuons. Maintenant, sur un très petit appareil, ce qui signifie sur un écran plus petit. Maintenant, je n'ai plus qu'à copier ça. Fermez les crochets de colonne. Et ici, nous devons spécifier la taille de l'écran, c' est-à-dire lorsqu'elle apparaît sur une entorse ou avec la largeur maximale désactivée pour 66 pixels. Je pense donc que cet écran devrait être très petit. Oui. L'option À propos de moi concerne donc le tiret. Options de tableau de bord. Nous allons le faire afficher flex, la colonne de direction flexible. Enfin, nous devons positionner correctement les boutons. Donc maintenant, je dois juste venir ici à propos du tiret, du tiret, des options, du PTA surligné de points. nous suffira donc de lui donner une fusion de 24 pixels du haut, puis de 0 sur le reste des côtés. Alors, je vais juste le faire, d'accord, beau. Je vais juste les copier ici. Faisons en sorte que la largeur soit 100. Les saints sauvent. Pouvez-vous voir que tout apparaît comme un spectateur et je l'aime bien. Nous allons donc le sortir sur toutes les plateformes. Iphone X, bon iPod, joli. iPad Pro. Magnifique. F15. Génial. Et enfin, sur Galaxy S5 ont raison. C'est ce que nous attendons de cette conférence. Maintenant, le composant est si beau. Très bien, à la prochaine conférence. Restez concentré et prenez soin de vous. 28. Créer le composant de résol et la variable de l'état à utiliser: Nous allons maintenant commencer à travailler sur leur composant CV. Et à la fin de cette conférence, vous aurez quelque chose comme ça. N'est-ce pas beau ? C'est vrai ? Alors, sortons ça. Vous avez donc ici l'histoire loufoque, compétences en programmation, les intérêts, l'éducation, les projets. Et les autres. Retournez à VS Code. Et ici, nous devons créer le composant correspondant et ajouter un fichier CSS. Cliquez ici avec le bouton droit de la souris sur un nouveau fichier. Et ici, nous allons appeler ça CV dot js. Créons le fichier CSS correspondant. Cliquez avec le bouton droit sur nouveau fichier. Ceci sera repris point css. Revenez au composant d'origine, générez les composants fonctionnels React js, RFC et os doivent masquer l'explorateur. Et maintenant, nous devons effectuer les importations nécessaires. Ici, nous allons importer les utilitaires de composants réutilisables, l'écran de démarrage, le titre de l'écran de démarrage JS. Et ici, nous devons importer le service d'entiercement à partir des utilitaires splash, screen, téléviseurs. Et ici, nous devons importer les animations. Cette fonction va prendre ses accessoires comme paramètre. Déclarons donc ici une variable d'état à utiliser. Pour l'état initial, il va être 0. Et ici, nous allons avoir des ensembles const, carrousel de style décoratif. Et les premiers états. Ici, nous allons le définir sur un objet vide. Nous devons donc maintenant implémenter l'effet de décoloration sur le défilement en douceur. Il me suffit donc de les copier à partir de la commande Component D ou Control D sur Windows, puis de les configurer pendant des années et de l'avoir. Je n'ai donc qu'à copier tout ce qui est ici comme ça. Revenez aux blagues originales. Et ici, je n'ai qu'à coller. Magnifique. Exécutons ce composant réutilisable et lui attribuons valeurs correspondantes à chaque attribut. Donc ici pour ce DFF va prendre un nom de classe de conteneur de tableau de bord de reprise, conteneur de tableau de bord d'écran. Très bien, et ici, dans cette div, nous allons avoir une autre div avec le nom de classe de la région contenant une div, lui donner un nom de classe de Resume, contenu de tiret. Et ici, nous allons rendre le composant d'en-tête d'écran de la balise à fermeture automatique. Et ici, le premier attribut est le titre. Et le titre devrait être repris. Et le deuxième attribut est le sous-titre. Et ici, ça devrait être ma forme de détails bio. Et bien sûr, vous devriez maintenant comprendre correctement le fonctionnement d'un composant raisonnable car je l'ai suffisamment expliqué lors de la conférence précédente. Ajoutons ce composant à l'écran. Retournez à la commande OTUS commune P. Je dois juste le régler ici. Les OT communs et l'ont. Importons le composant d'origine. Importer. Reprise à partir de conteneurs de portefeuille, affrontement, curriculum vitae, affrontement, reprise JS. Et là, nous n'avons que deux points forts. Dupliquez ce code ou vous pouvez également copier et coller. Je pense que je vous ai appris comment faire cela lors de conférences précédentes. Ici, il vous suffit de le remplacer par le nom de l'écran, qui est un CV. Et ici, le nom du composant doit être CV, désolé. OK. Mélange de paraffine. Voici la même chose que, d'accord, c'est un satellite pareil. Lançons l'application pour voir ce que nous avons à bord. Venez ici pour déterminer. Ensuite, nous sommes dans le répertoire racine. Donc je dois juste faire un client CD. Et puis NPM commence par des crossovers n'est pas défini. Retournez à VS Code. Ouvrez leur CV. J est sur la ligne 15. Très bien. Il y a une erreur dans l'orthographe d'un foin. Et je pense que cela vient de la conférence précédente. Il est donc censé être Scroll CVS Command S pour gagner un temps de plus. Revenons au navigateur. Voici donc la région affichée en haut comme navigation. Cliquons dessus. C'est vrai ? Cette fois, rien ne se passe. Retournez à VS Code. Et ici, il suffit de lui donner une pièce d'identité. ID de point Props est une chaîne vide. Économisez. Retournez en arrière et sortez-le encore une fois. Donc, chauffez l'avortement original. Voyez-vous que le composant réutilisable est déjà rendu ? Commençons donc à travailler sur la société d'origine et rapidement. Très bien, donc avant de continuer, je pense qu'il est nécessaire que les rangées soient chromatiquement EXXAT d'un cheveu. Il suffit de retourner au MEG, c'est ici. Et puis ici, nous avons importé des CV de défilement. Je ne sais pas comment les prononcer de toute façon, mais il y a un double œil d'une journée. Maintenant, je dois juste les enlever et ensuite retourner là où nous l'avons utilisé. Est-ce qu'il faut juste l'essuyer. Et puis le voilà, épelé. Dit sur la ligne 13. Plusieurs encore, un locataire. Magnifique. Retournez maintenant au navigateur. Nos écrits, tout fonctionne comme prévu. Donc, lorsque vous écrivez une application comme un pro, vous devez être chromatiquement EXXAT. La ligne imbriquée consiste à créer un composant raisonnable mineur. Retournez aux zones visuelles. Et bien sûr, nous en avons fini avec le VGS ci-dessus, donc je dois juste le fermer. De plus, nous en avons fini avec les OT communs. Fermez-le vers le bas. Très bien, donc ici , nous allons avoir une composante raisonnable mineure. Nous allons donc avoir une journée pour le nom de classe de la région, du CV, du titre de tiret. Nous avons également besoin d'une div avec le nom de classe de reprise tiret, en-tête de tiret, div, donnez-lui le nom de la classe, le titre tiret, la puce. Par conséquent, ici, nous allons avoir les en-têtes d'attribut. Par conséquent, si une valeur est affectée à l'en-tête d'attribut, nous afficherons ces flèches de valeur. Rien ne sera affiché à l'écran. Pour cela, nous allons avoir un rendu conditionnel. Nous allons donc s'étendre ici. Nous allons faire des en-têtes de points accessoires en tant qu'attribut. Et si le titre est un score Z, nous devons montrer la tête et valeur invite un point en-tête autrement. Rien ne serait affiché sur un écran, juste une chaîne vide et rien ne serait affiché à l'écran. Par conséquent, ici, nous avons un autre attribut de date de départ. Laissez-moi vous montrer. Voici la date de départ, puis voici la date des orteils. Le plus simple. Donc, si la date de départ et l'indique existe, alors nous allons l'afficher. La date. Donc, ici, nous allons avoir une div avec le nom de la classe de tête dans le tableau de bord. J'ai pris des guillemets doubles, puis soulignez ici. Les accessoires pointent à ce jour. Donc, des flèches. Si le débiteur n'existe pas, il faut alors afficher une div vide. Nous allons afficher une div vide. Magnifique. Je dois enregistrer et formater ce code plus fort, non ? Donc ici, nous allons avoir une autre div avec le nom de classe de CV, tiret, tiret, en-tête. Et s'il vous plaît ne pas correspondre aux noms de classes Java sont orthographiés correctement, vous n'avez donc aucun problème lorsque nous commençons à styliser l'application. Donc, si le sous-titre existe, nous devons l'afficher et rien ne sera affiché à l'écran comme d'habitude. Nous avons donc ici le sous-titre des attributs , sous-en-tête des points props. S'il s'agit de z, nous devons montrer le sous-titre. Et le nôtre. Nous allons juste avoir une chaîne vide. Tout ce que nous faisons ici, c'est de recevoir les données que le doute serait transmis à partir du composant principal. Très bien, donc ici nous avons le sous-titre des attributs lorsque nous avons exécuté qui est un composant, les attributs de tête. Et il va prendre une valeur, sorte que cette valeur est spécifiée, puis elle sera affichée ici. Sinon, si aucune valeur n'est donnée aux attributs du titre, rien ne sera affiché à l'écran. C'est aussi simple que cela est juste ici. Après la div de clôture du nom de classe Iridium Subheading. Nous allons avoir une autre div avec le nom de classe d'un tiret de CV, d'un titre, d'un tiret, d'une description. C'est la même chose ici. La même chose ici. Si une valeur est attribuée à la description de l'attribut , nous devons afficher cette valeur. Et rien ne serait affiché à l'écran. C'est vrai ? Je ne veux donc pas que cette conférence prenne trop de temps, car nous avons beaucoup à faire. C'est tout pour l'instant, pour cette conférence, à la prochaine conférence. Restez concentré et prenez soin de vous. 29. Préparer des données statiques de la série de données statiques 1: Commençons par les données statiques. Mais avant de procéder, nous devons effectuer les importations nécessaires. J'ai ouvert le répertoire des matériaux, ouvrez le client pro portfolio, les ressources SRC. Ensuite, ici, dans le répertoire des matériaux, nous devons copier ce package de révision. Laissez-moi vous montrer. Cela contient le SVG que nous allons utiliser dans ce composant. Je n'ai donc qu'à copier. Venez ici, collez, fermez-le, fermez-le vers le bas. Retournez à VS Code. Déclarons que des données statiques doivent être utilisées. J'ai foiré. Par conséquent, ici, nous allons avoir une Constance, appeler ça des poulets de la région. C'est la meilleure façon de nommer un tableau. Très bien, vous pouvez donc voir les puces de CV simplement parce qu'il s'agit d'une collection de données. Donc, quand je fais des balles, ce n'est pas une bonne pratique. Et en fait, c'est ma propre opinion, mais c'est bien. Vous nommez une zone avec un mot au pluriel. Donc, ici, nous allons avoir l'étiquette phosphate. Colonne. Voici l'éducation, le logo virgule, le SRC, le deux-points, le point d'éducation SVG. Laissez-moi vous montrer rapidement. De l'héroïne aux atouts. Et voici le curriculum vitae. C'est donc l'éducation en tant que Vg ici. Très bien, séparément dans le coma. Et ici, nous allons avoir le mot histoire. Ici, c'est ça. C'est la même chose. Nous devons avoir une virgule de colonne d'étiquette, puis nous avons le logo SRC coelom. Ensuite, nous allons avoir un tableau de bord, une histoire, un point SVG. Il s'agira en effet de répétitions. Il me suffit donc de faire avancer rapidement la vidéo. Très bien, maintenant j'en ai fini avec ça. Également. Il vous suffit de mettre en pause la vidéo à votre fin et de la terminer. Tout est pareil. Tout ce que vous avez à faire est de changer l'étiquette et le SVG, non ? Par conséquent, la ligne inférieure à consiste à déclarer des données statiques pour la barre de progression des compétences. Donc, tout est le même processus. Ici, nous allons avoir des compétences en programmation, des détails. L'échelle d'automne. Sortons une sortie. Nous avons une virgule JavaScript , puis nous lui donnons un pourcentage de notation. Donc, pour moi, ma capacité en JavaScript est gratuite jusqu'à 85 pour cent de spécifier votre capacité ici, séparée par une virgule en double. Et ici, nous devons changer l'échelle pour réagir à JS. Le taux et le pourcentage de mon React vont être. Laissons-le à 85 ans aussi. Et cela impliquera en effet des répétitions. Il me suffit donc de faire avancer rapidement la vidéo. Très bien, j'en ai fini avec ça. vous suffit donc de remplacer la compétence et le taux en pourcentage. Faites-le donc pour d'autres compétences que vous avez attrapées, puis vous aurez le droit. Maintenant, une ligne imbriquée consiste à déclarer des données statiques pour montrer que les informations concernent le travail du projet. Je vais donc faire des protestations contestataires. Et comme vous pouvez le voir, j'utilise le mot plèvre pour le grimpeur. Nous allons donc avoir un titre ici. Laissez-moi vous montrer. Voici le projet, puis voici les détails. Nous allons donc avoir un titre. Nous allons donc avoir ici une colonne de titre. Ensuite, je vais passer le site Web du portefeuille. virgule. Ensuite, nous avons la durée. La durée. Laissez-moi vous montrer. Voici la durée. Maintenant, nous devons faire appel à la firme. Je vais donc juste faire de 2020 à 2021. Excusez-moi, ça devrait être deux points, séparés par une virgule. Et puis, ici, nous allons faire la colonne de description. Revenez en arrière et copions la description. Entre le tribunal, séparé par une virgule et pour le sous-titre. Nous allons donc inclure ici un autre projet. Voyez-vous que nous avons une boutique, le site de commerce électronique. Bonjour, je vais le faire maintenant, c'est dupliquer ce code deux fois. Très bien, tout ce que vous avez à faire est corriger le projet sur lequel vous avez travaillé ici. Vous avez peut-être travaillé sur n'importe quel projet. Il doit s'agir du titre du projet, cette dette Vous avez commencé le projet, puis de la date de fin du projet. Vous devriez donc parler ici d'un projet qui est la description et voici le sous-titre. Et la même chose s'applique à tous ces types de moi ici. Il s'agira en effet de répétitions. Il me suffit donc de faire avancer rapidement la vidéo. C'est la même chose que j'ai fait ici. J'inclut les projets sur lesquels j'ai travaillé, date à laquelle j'ai commencé le projet et la date de fin, la description et le sous-titre. C'est exactement ce que j'ai fait ici. Et vous pouvez également poster une vidéo à votre extrémité et écrire la mienne si vous le souhaitez. Les données statiques pour le reste des détails de la région. Je vais donc faire des const, reprendre les détails. Ici, nous allons avoir une div, lui donner un nom de classe de CV, tiret d'écran, conteneur, et nous devons donner la clé. Donc, si j'entends entendre, nous devons rendre les composantes mineures raisonnables. Reprendre, se diriger, se rapprocher avec une étiquette à fermeture automatique. Et ici, il y a un attribut appelé « Heading ». Donnons donc une valeur à cet attribut. Je dois juste les copier, les coller entre les guillemets doubles. Et aussi de ce composant se trouve un autre sous-titre d'attribut. En tant que sous-titre, c'est ça. Juste après la copie ? t'ai dit que ça va prendre du temps parce que nous allons tout faire à partir de zéro. Et nous avons de l'attribut ID. Permettez-moi donc de dire que je ne peux pas entrer à l'université en 214. Ensuite, je suis devenu diplômé, je dis jusqu'à 18 ans. Vous pouvez donc faire n'importe quoi ici comme bon vous semble. Vous écrivez quelque chose ici. Je vais juste copier ce code ici, copier, venir ici, coller. Ensuite, nous devons modifier les valeurs. Nous avons donc ici à propos de l'éducation. Il s'agit d'une autre classe de certificats. Ici, nous avons le Service national de la jeunesse. Donc, toutes ces certifications sont mes certifications. faut donc le remplacer par des héros. Et ici. Et voici ce qui va être de 2019 à 2020. Alors mettez en surbrillance, dupliquez-le une fois de plus. Et ensuite, nous avons ici le lycée. Je pense donc que tout le monde devrait en avoir. Le lycée que vous avez fréquenté, le nom du plus cool ici. Et nous devons également les mettre en œuvre pour le travail sous forme de périodes. Alors venez ici. Plus une virgule ici à la fin de ce nom de classe div de fermeture, conteneur d'écran de reprise. Nous allons donc avoir une div avec le nom de la classe. Bien qu'il ait le même nom de classe. Le nom de la classe va être le même, il y a une copie à partir d'ici, venez ici, puis collez. Maintenant, fermez la div. Et ici, nous devons changer la clé. Quelles périodes S tiret. Donc, ce sera probablement la même chose. Maintenant, je n'ai qu'à copier ce composant réutilisable. Venez ici, collez-le ici, retournez au navigateur. L'histoire du rock. Voici donc le nom de l'entreprise pour laquelle vous travaillez actuellement. Copier. Venez ici sur le titre et le sous-titre. Copier le collage. Maintenant, vous devez indiquer si vous travaillez actuellement dans cette entreprise. Alors peut-être que j'ai été embauché en 2020, puis ne suis pas là correctement ou que je travaillais dans cette même entreprise. Je vais donc simplement indiquer que nous présentons un portefeuille très classique auquel nous sommes confrontés. Nous allons maintenant avoir cette description. Nous allons donc avoir une div, donner le nom de la classe de description de l'expérience. Et ici, nous allons avoir une étiquette de span, donner le nom de classe espagnole du CV dash, tests de tiret, juste entre ces balises. Viens ici. Il me suffit donc de copier la première ligne placée. Donc pour ici, nous allons avoir une autre div avec le nom de classe de description expérimentée, l'orthographe de l'expérience. Je pense donc que ce n'est pas bien orthographié. Donc. Très bien. Donc ici, nous allons avoir une plage avec le nom de classe du test de description de CV, le tableau de bord, le tableau de bord, le test. Et ici, nous devons revenir sur les sites Web, qui est la page de démonstration. Et puis copiez ces deux lignes ici. Collez-le ici. C'est bon ? Et ici, je dois juste l'indiquer avec un tiret. Tout à fait, c'est facultatif. Juste après cette étiquette de livre. Nous allons faire une pause. Et ici, nous allons avoir un autre onglet. Je n'ai donc qu'à copier cela simplement parce que c'est exactement la même chose. Superbe. Venez sur la démo du site Web. Copiez ces lignes. Viens ici, colle-le. Enfin, nous allons penser que nous devrions utiliser les balises à penser que nous devrions fermeture automatique pour ces derniers. Nous avons également besoin d'une étiquette de span. Copiez ceci, venez ici, collez. Retournez en arrière. Ici. Nous devons copier la dernière ligne, comme ça et l'os. Nous sommes prêts à y aller. Faisons une pause ici et continuons dans la prochaine conférence. Prends soin de toi. 30. Préparer des données statiques 2: Continuons avec les données statiques juste après cette div de fermeture, nom de classe, description expérimentée. Alors placez une virgule ici. Nous devons traiter les données du programme si nous allons avoir un nom de classe. Donnons une clé. Je vais donc appeler les compétences clés en programmation aux détails des compétences de programmation. Laissez-moi vous montrer en train de foirer, là-haut. Je n'ai donc qu'à copier ici. Nous allons programmer des points DDOS. Maintenant, nous allons avoir une div, lui donner un nom de classe de parent de compétence. Esquive des compétences. Donnez-lui une clé, donnez-lui une clé. Index. Fermez le DV. Très bien, nous allons maintenant avoir une autre div avec le nom de classe de la puce de tête. Et ici aussi, nous n'avons pas de demi-span à afficher ici. Je vais donc faire une compétence Q dot. Nous avons besoin d'une plongée ici. Un tiret. Veuillez toujours regarder l'orthographe des noms de classe. C'est tellement important. Nous allons donc appliquer ici des lignes, des serviettes. Je vais faire Star. Un point écrit présenté. Donnez à cette div un nom de classe de tiret. Line est le projet. Nous devons donc cartographier le projet pour qu'il soit affiché à l'écran. Placez une virgule ici juste après la div de clôture de ClassName. Reprend le conteneur Queen. Donnez-lui le nom de classe d' un conteneur d'écran de CV et donnez-lui une clé. Nous devons donc parcourir les détails du projet ici. Carte de points détaillée. Nous devons maintenant louer ce petit composant réutilisable. Donnez-lui une clé. Ce composant possède un attribut appelé en-tête. Je vais donc faire des détails points, titre, détails du projet, point, point, point. Donc, plus une virgule ici à moins de le faire enfin pour l'intérêt. C'est vrai ? Il semble donc que les noms de classes soient les mêmes. Je n'ai qu'à copier, coller. Modifiez la clé pour identifier de manière unique tous les arrêts. Nous devons donc louer le composant réutilisable également. Et ici, permettez-moi de vous montrer les intérêts. Nous n'avons que le titre et la description. Et auparavant, ce que nous avons fait était pour les détails du projet. Bien sûr, nous avons la description du sous-titre de l'indifférent. Laissez-moi vous montrer. Pouvez-vous voir la description du sous-titre du titre à ce jour ? Nos droits. Donc maintenant, quelqu'un est aux prises avec moi et j'aime ça. Donc, ici, nous allons avoir le titre, lui attribuer une valeur comme nous l'avons ici. Le nid est donc la description. Copiez-les, collez-les entre le devis. Magnifique. Il me suffit donc de souligner les troisième composants réutilisables. Dupliquez-le deux fois ou copiez-le et collez deux fois. Par conséquent, ici, il suffit de changer le titre et la description. Le titre et la description. Très bien, permettez-moi de faire avancer rapidement la vidéo et de le faire à ma fin. raison, ils sont beaux, ils ne le font pas. Assurez-vous donc de changer. Ici, la tête et vous pouvez voir de la musique, quelle que soit la musique que vous aimez écouter. Et puis, oui. Ici, les jeux compétitifs peuvent parler de ce jeu. Vous aimez le plus, tout comme vous l'avez ici. Par conséquent, nous pouvons copier à partir de ceux-ci et les copier comme celui-ci. Oui. Très bien. On se voit donc lors de la prochaine conférence. 31. Créer les fonctions de Ui pour afficher les données de CV de l'écran: Finalisons maintenant le composant d'origine. Mais avant de continuer, nous devons le faire. Très bien, alors j'ai réalisé que ces codes étaient nécessaires, je dois juste les couper de cet endroit. Venez au sommet d'un ici, collez-le ici. C'est vrai. Maintenant, faites défiler vers le bas. Nous devons maintenant définir une fonction pour le Caruso. Et je vais l'appeler, nous allons avoir une hauteur de réglage variable. Nouveaux crochets Kouros décalent, ouvrons et fermons les crochets bouclés. Et puis il faut lui donner une colonne de style, ouvrir et fermer des crochets bouclés. Ici, nous allons avoir une transformation. Traduisez ensuite Y, c'est-à-dire un axe Y. Maintenant, ouvrez et fermez les crochets. Et ici, nous allons avoir cette double citation. Donc maintenant, nous allons définir des compensations de carrousel. Ici, nous allons prendre un nouveau Caruso. Et ici, nous allons définir la sélection sur l'index à puces, puis choisir l'index directement sur votre téléphone. Économisez. Maintenant, nous en avons fini avec la fonction carrousel. Pour que cette fonction soit appelée, nous devons activer l'option onclick. Par ici. Nous allons avoir une fonction. Il nous suffit donc de cartographier les puces de CV. Je vous montre en haut ici à une virgule k de la région et ici les icônes sur l'étiquette. L'icône sur l'étiquette. Donc, oui. Très bien, donc on va bien, c'est ici. Maintenant, je vais faire des balles originales. Carte des points. Bien sûr, vous devriez maintenant être très familier avec la carte. Réglez-le sur notre fonction et ici, ouvrez et fermez les crochets. Nous allons donc avoir une div et spécifier l'onclick. Et ici, nous allons invoquer la poignée kairos, notre fonction. Donnez-lui maintenant un nom de classe. Nous devons maintenant conditionner le nom de la classe pour permettre de styliser la navigation de plaisance sélectionnée. Je suis donc moins de temps pour le code et laissez-moi vous montrer. Maintenant, je vais faire si index, puce sélectionnée, index. Et nous allons montrer ce nom de classe sélectionné tiret, balle. Et nous allons montrer la balle des années 90. En gros, permettez-moi de vous montrer, par exemple, que l'éducation n'est pas cliquée et qu'elle n'est pas sélectionnée. Maintenant, lorsque je clique sur l'éducation, vous allez voir que la couleur de la police va devenir blanche. Pouvez-vous voir cela résulte de la déclaration conditionnelle de styliser les poêles en fonction de l'état. Bon, donc maintenant ici la condition n'est pas cliquée, donc vous allez la voir, notre historique de travail dessus, une sorte de police sombre. Donc, quand je clique dessus, vous réaliserez qu'une police est devenue blanche. Les données les plus simples. Cela signifie donc que lorsque l'index est égal à l'index à puces sélectionné, nous devons styliser cette classe pour que les téléphones soient blancs. Et la ligne est de lui donner une clé. Nous allons donc avoir une étiquette IMG avec le nom de la classe, tiret de puces, logo, moins près avec une étiquette à fermeture automatique. Src, ouvrez et fermez les crochets bouclés. Et nous devons exiger que le E fasse en sorte que toutes les icônes exigent de l'espace, ouvrent et ferment des crochets. Ensuite, nous devons cibler le paquet d'actifs. Courge, CV. Ici, ouvrez et fermez le support bouclé, les balles, le point, le logo, SRC et la connexion Internet artistique. Cela signifie donc que si l'image n'est pas affichée, nous allons afficher ce test. Passons maintenant à la région T2 pour qu'elle soit affichée à l'écran. Nous allons avoir une fonction pour cela. Juste ici. Nous allons avoir une fonction qui obtient les écrans de CV, lui donner un nom de classe d'un CV, un tiret, des détails, un tiret, des flèches vers le haut. Et ici, nous avons deux vrais détails. Détails, sauvegarde des points . Après le composant d'en-tête d'écran. Nous allons avoir une div avec le nom de classe de CV dash. Et voici un autre nom de classe div, tiret de reprise, puces, puces, conteneur , puce, icône, ceci. Et nous allons avoir une IV, lui donner un nom de classe de balles. Maintenant, nous n'avons plus d'informations qui obtiennent la fonction balle de S à sauvegarder, n'est-ce pas ? Puisque tout va bien. Et enfin, après la div de clôture, raison ClassName le bool. Nous allons avoir une autre div avec le nom de classe Dodge, Bullets, Dash Details. Nous devons invoquer que obtenir les écrans de reprise fonction S pour enregistrer. Retournez au navigateur et regardons ça. Rechargez. Rien n'a été renvoyé depuis le rendu. Cela signifie généralement qu'une instruction de retour se déroule. Voyons quel est le problème. Examinons les données statiques. Ici, dans le composant réutilisable. Les gars K. Jetez un coup d'œil. Maintenant, c'est là. Pas bien orthographié, je suis vraiment désolée . C'est une correction. Nous devons retourner l'interface utilisateur. Et c'est là que réside le problème. Maintenant, je vais juste mettre en évidence ces coupes supplémentaires collées ici. Il suffit d'effacer le point-virgule. Avec des jours sera la bonne commande S à économiser. Retournez dans le navigateur et vérifiez-le. Faites défiler vers le bas C'est exactement le résultat que nous attendons de cette conférence. Dans la prochaine conférence, nous commencerons à styliser cette application. Et en effet, il va être extrêmement beau. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 32. Styler les composants de CV: Commençons à styliser leur composant CV. Comme vous pouvez le voir à l'écran, il n'y a pas d'espace pour faire la différence entre le composant écrit et le composant. Voici la composante du milieu. Voici le composant d'origine. Une autre chose sur laquelle je veux que vous vous concentriez ici. Il suffit de jeter un coup d'œil sur le côté gauche de l'écran. Voyez-vous que les icônes ne s'affichent pas, c' est-à-dire les SVG pour l'éducation, l' histoire du rock, compétences en programmation et le reste de la journée. Il faut donc que tous ces trucs soient corrigés dans cette conférence. Harold au code VS à moins de continuer. J'ai foiré. Ici, c'est ça ? Maintenant, chaque fois que vous avez besoin d'une image provenant d'un paquet, vous devez venir ici, puis effectuer le point par défaut. Je pense que je vous l'ai dit lors de la conférence précédente. Donc, à mon avis, cela pourrait poser problème avec la version. Et au fait, c'est ma propre opinion. Donc Heron pour les lire CSS et moins continuer. Nous allons commencer par le conteneur de raison. Je vais donc faire un conteneur de CV point. Laissez-moi vous montrer rapidement. Ici, sur le tourisme JS. Faites défiler vers le bas Et voilà. C'est bon ? Nous allons avoir une flexibilité d'affichage. Et nous avons vraiment fait ces UNC fossiles. Et je pense maintenant qu'il est bon d' expliquer exactement ce que cela fait. Lorsqu'un conteneur est configuré pour afficher le flex, il étend les éléments pour remplir l'espace disponible ou les réduire pour éviter le débordement. C'est aussi simple que ça. Alignons maintenant les éléments au centre. La direction de la flexion. Colonne. Justifiez le centre de contenu. La hauteur moyenne. Faisons en sorte qu'il s'adapte au contenu. La marge, 120 pixels. Pour voir les effets à l'écran, il faut lier leur CV au fichier CSS. Alors dirigez-vous vers le tourisme GAS, merdez la lave ici, nous devons importer le régime dot css, sauvegarder sur le navigateur. Les frais prennent progressivement forme. Raison CSS. Et ici, nous devons styliser la carte. La carte va servir de conteneur lequel les informations d'arrestation seront conservées. Nous allons avoir une flexibilité d'affichage. Donnez-lui une hauteur de physique, la largeur des pixels de 10 à 100 pixels. Enregistrez-la sur le navigateur. Pouvez-vous le voir maintenant ? Donnons donc une couleur d'arrière-plan vous puissiez voir de quoi je parle. C'est juste pour plus de clarté. Couleur de fond. Faisons ça de la tomate. Économisez. Retournez dans le navigateur. Maintenant, pouvez-vous le voir, donc cela sera enregistré en tant que conteneur pour le reste des articles. Et maintenant, les icônes ici. Quand je retire la couleur d'arrière-plan, les cheveux sur le navigateur. Voyez-vous maintenant qu'il semble que l'icône n'est pas simplement parce que l'arrière-plan est blanc et que l'icône elle-même est blanche. Allons-y. La raison pour laquelle Booléens , région de points, tiret, puces. Donnons une hauteur de 100 %. L'ombre de la boîte, 15 pixels. Il y a neuf pixels sur 15 pixels, et la couleur de l'ombre de boîte sur f, 2 à 3, cinq, sauvegardez-la sur le navigateur. Et voici l'ombre de la boîte. Maintenant, spécifions la largeur et rendons tout propre. Avec autant d'enfants, 30, 20 pixels, enregistrez-la sur le navigateur. Et voilà. Pouvez-vous voir le message M line est la raison des détails des puces. Je pense donc qu'il a deux faits saillants. Prenez, venez ici, collez, fermez les crochets bouclés. Tout ce que nous devons faire, c'est des détails. Et s'il vous plaît toujours correspondre à un nom de classe sont les soudures, Paltz, le flex grow. Spécifiez-en un ici. La largeur. Il doit s'agir d'une valeur de 100 pixels. Débordement, chauffage et rembourrage. 0, 0. Coffre-fort. Encore une fois, dirigez-vous vers le navigateur et faites-le brouiller. Maintenant, pour la description de l'expérience, expérience des points, le tableau de bord, la description. Gardez à l'esprit que les orthographes sont correctes. Nous allons avoir la marge. Dix pixels depuis le haut. 0 sur le reste des côtés. Aligner. Justifiez, spécifiez la largeur maximale, 100 %. C'est vrai ? Donc pour la raison détaille Cairo sur elle sur le navigateur et laissez-moi vous montrer. Maintenant, cliquez sur l'une des étiquettes. Il va apparaître les détails du correspondant. Essayons donc cela sur l'historique du travail. voyez-vous ? Compétences en programmation, projets, éducation ? Bien que cela se présente bien, mais ce n'est pas comme prévu. Voici le résumé du point VS Code, détails du tiret. Dodge. Les règles de la voiture sont lorsque l'une des étiquettes est cliquée. Nous voulons qu'il soit fait défiler jusqu'à chaque détail correspondant. Je vais donc faire la transition, me transformer. Faisons en sorte que ça soit sûr. De l'héroïne au navigateur. Et maintenant, nous devons recharger ici l'historique du travail. Vous avez vu que c'est magnifique ? J'aime bien l'informatique. Projets d'éducation. Et maintenant, je veux vous montrer quelque chose avec intérêt. Voyez-vous qu'il y a un espace vide ici ? Ne vous inquiétez pas. Au fur et à mesure que nous procédons à la stylisation de ce composant, tout apparaîtra comme prévu dans le code VS. Faites défiler vers le bas Et maintenant, pour le conteneur à balles, conteneur de points, nous allons le faire afficher flex, aligner les éléments au centre. Donnons une hauteur, 101 %, 100 %. Qu'est-ce qui fait encore, la position relative, sauvegarder sur le navigateur. Maintenant, tout ce qui se trouve dans le conteneur à balles est ligne comme les balles. Les puces spécifient la largeur de 80 %, la position également relative. Et l'indice Z. Pour la balle elle-même. Je veux dire, toutes ces étiquettes, y compris les économistes, pointent des balles. Nous allons avoir une flexibilité d'affichage. Alignez les éléments au centre. La couleur d'arrière-plan. La couleur d'arrière-plan est correcte. J'espère que vous connaissez cette couleur. Compte tenu de la hauteur de 40 pixels. Marge, 15 pixels du haut. La droite, les pixels Sarah, le rembourrage, 0 pixels. Excusez-moi, c'est huit pixels. Rayon de frontière. Un rayon de bordure va être de 20 pixels. La largeur 30 pixels. Transition. Enregistrez-la sur le navigateur, et voici les résultats. Tout est bien. Maintenant, pouvez-vous voir ce que j'ai concentré ma souris sur les étiquettes que je voulais afficher un pointeur ? Je vais donc refaire Enregistrer, aller sur le navigateur. Maintenant, jetez un coup d'œil. Vous voyez que c'est juste. Ensuite, les balles sont étiquetées. Tiret de balles, étiquette. Taille de police. 14 pixels. L'espace blanc remonte. La famille de polices, semi bol. Découvrez-le sur le navigateur. Voyez-vous, pouvez-vous voir que tout prend forme trimestriellement ? Le nid est le logo des poulettes. Donnons la hauteur de 16 pixels, marge. 0 petits pixels, héroïne au navigateur. Voyez-vous maintenant que les logos sont bien espacés. peux voir, vous savez, maintenant pour les icônes de puces, les puces de points, tiret, je peux lui donner une largeur de 34 pixels. Hauteur, 100 %. Indice Z 1. Donnons une couleur d'arrière-plan. Comme d'habitude, la couleur de fond. Sortons ça sur le navigateur. Pouvez-vous voir maintenant ce bar ici ? Mais nous voulons que les logos soient deux places ici. Donc, pour cela, nous allons avoir un poste. Faisons en sorte que c'est absolu. Enregistrez-la sur le navigateur. Magnifique, je l'aime bien ici en haut du code VS. Et pour l'icône de balle. Maintenant, pour les balles sélectionnées, permettez-moi de montrer que vous n'avez pas de tourisme GAS et ici dans la fonction. Très bien, donc voilà. Nous venons de styliser la balle et nous allons également styliser la balle sélectionnée. Permettez-moi donc de vous montrer quand une étiquette est cliquée. Nous voulons qu'il soit mis en évidence. Je n'ai pas surgi CSS. Et je vais faire des balles d'esquive sélectionnées. Il suffit de spécifier la couleur. Faisons le blanc. La largeur. 100 % sûr. Magnifique. Cliquez maintenant sur Project DOC, histoire du rock, éducation. C'est vrai ? Continuons avec le conteneur d'écran. Alors maintenant, après cet intérêt caché, laissez-moi vous montrer que vous pouvez voir cela ? Nous devons résoudre ce problème. Dot Dash, conteneur de tableau de bord. Disposons d'une flexibilité d'affichage. Et la direction de la flexion. Côlon. Justifiez le contenu. Espace uniformément. Donnez-lui une hauteur. 360 pixels. Donnez-lui une largeur. 100 %. Coffre-fort. Elle est sur le navigateur. Maintenant, pouvez-vous voir que tout est correct sur la carte comme on le soupçonne ? Héroïne à VS Code. Faites défiler vers le haut Définissons maintenant la couleur d'arrière-plan de ce catalogue plus de temps. Rien ne sort de la voiture. Tout va bien dans le coffre. Faites défiler jusqu'à une ligne inférieure à la ligne est la raison pour laquelle la région de tête reprend le titre. Dash, tête de tiret. Rapidement, aussi heureux de positionner relatif. C'est ainsi que nous affichons le flex. Justifiez le contenu. L'espace entre la ligne est la tête et les booléens. cap, le tiret, la balle. Donnez-lui une position. Absolu, gauche moins 30 pixels. La hauteur et la largeur, 15 pixels. Le haut est de 50 pixels. Indiquons la couleur d'arrière-plan. Et cette fois, nous allons le rendre orange. Enregistrez-le sur le navigateur et retirez-le. Voici donc les balles tirées sur l'historique du travail. Et ici, la ligne solide est de rendre les choses assez simples, donc il suffit de faire un rayon de bordure. Fais-le 50 pour cent. Retournez dans le navigateur et entendez que les preuves apparaissent bien. La ligne MSDN est la raison de la décapitation, point-tiret, du tiret, du titre. Et assurez-vous toujours que les noms de vos classes sont bien orthographiés. Une taille de police de 14 pixels. Le cours de la famille de polices que vous devriez connaître maintenant, coquelicots, semi boulder, la couleur de la police. Nous allons donc dialyser la description du titre de raison, de bord, le tableau de bord, la description. Il suffit de spécifier la taille étrangère des pixels. Alignez, justifiez de prendre forme. Très bien, donc la ligne est la date d'un ici, c' est-à-dire la durée. Pouvez-vous voir sur le bord droit de l'écran ? Mettons en évidence ce point hebdomadaire, en-tête, tiret, date, non ? Donc, euh, nous allons spécifier la couleur d'arrière-plan. Bien sûr, nous allons devenir orange foncé. Copiez, collez-le ici. Donnez-lui une fête. La taille du téléphone. Il doit être de 14 pixels. Donnons un rayon de bordure de 14 pixels. Enfin, nous voulons que la couleur, qui est la couleur de la police, soit blanche. Un havre de sécurité pour le navigateur. Et voici la belle tête sur le code VS. Commençons donc à styliser la section de compétences, qui est ce point de barre q, le tableau de bord de compétence parent. Faisons en sorte qu'il affiche Flex. Et la colonne de direction flexible. Car nous en avons 50 pour cent. Maintenant, pour le programme dans un conteneur en acier, conteneur de compétences de programmation, laissez-le afficher flex. Et la direction de la flexion va être erronée. Alignez les éléments au centre. Justifiez le contenu. Espace entre l'enveloppe flexible. Quel est le pourcentage de compétences ? Dash de compétence Dot. Cela va donc montrer la force de vos compétences en programmation. Maintenant, nous allons prendre position. Faisons en sorte que ça soit relatif. Donnez-lui une hauteur de 15 pixels, 70 %. Et bien sûr, nous devons spécifier la couleur d'arrière-plan, donc je dois la copier à partir d'ici simplement parce qu'elle va être de la même couleur. Enregistrez l'héroïne dans le navigateur. C'est vrai ? Donc, nous avons terminé cette station balnéaire bizarre, hein, quel pourrait être le problème ? Accrochez-vous au code VS. Quel est le problème ? Voyons tous les parents, tout est cool ici. Le conteneur de compétences en programmation. C'est nos bons amis. Faisons ces deux-là pour les envelopper, non ? Donc, le flex Wrap va être Rob sur VS Code. Et boum, tout comme prévu pour la barre de pourcentage active. Je vais donc les copier ici. Collez, fermez le support bouclé. Et par ici, Dot Dash, Dash. Faisons cela rapidement. Bien sûr, la hauteur sera la même. Je vais juste copier-coller la transition. Et cette fois, la couleur d'arrière-plan va indiquer votre capacité. Il faut donc préciser si c'est sûr ? Magnifique. Maintenant, pouvez-vous voir que tout fonctionne comme prévu ? J'aime bien que ce soit jusqu'au code VS. Enfin, pour la balise span, à droite, dans la classe parent de compétence. Il faut donc les copier. Viens ici. Collez, fermez les crochets bouclés. Nous allons avoir la balise span, la famille de polices, la taille de police, 16 pixels. Et la couleur va être orange foncé. Couleur de police, orange foncé. Coffre-fort. Très bien, alors passons sur le navigateur et voyons le résultat final. Magnifique. Prends ça sur l'éducation. Au sein de Qu, whack, histoire, programmation, compétence, projet, intérêt. Tout fonctionne comme spectateur et j'aime ça. Ainsi, lorsque vous le vérifiez sur la plateforme mobile, vous vous rendrez compte qu'il n'est pas réactif. Pouvez-vous voir le Moire ? Ce problème serait corrigé lors de la prochaine conférence. C'est donc tout pour l'instant, pour cette conférence, à la prochaine conférence. Restez concentré et prenez soin de vous. 33. Repérer la révolution: Très bien, nous allons maintenant rendre les composants du CV réactifs. Héroïne, donc VS Code. Commençons par l'iPad Pro. Style comme carte de CV. Reprendre le tableau de bord. Donnez-lui une largeur de 80 pixels. Je rigole pour ça. Alors descendez ici. Nous devons maintenant styliser les détails originaux de la balle. Dot radium, esquive les balles, détails du tableau de bord. Spécifiez le rembourrage. vrai, donc c'est fini. Et pour l'iPad Pro, passons maintenant sous arrestation des plateformes mobiles. Lorsque vous mettez en surbrillance ces grab Based, fermez les crochets bouclés. Et ici, nous devons spécifier les pixels pour les téléphones mobiles. Contenu de reprise de 1023 points comme la façon dont nous affichons la colonne Flex et la direction de flexion. Alignez les objets pour envoyer des nids pour les balles. Des balles. Bon, il faut donc placer un point ici simplement parce que c'est un nom de classe. Et les balles vont avoir un tissage de 90 %. Pour la carte de la région. La hauteur. Faisons en sorte qu'il corresponde au contenu. Nous allons avoir une flexibilité d'affichage. Et la colonne de direction flexible. La marge, 30 pixels alignent les éléments. Centre. Bien sûr, la largeur sera de 90 pour cent, donc je vais la coller ici. Maintenant, pour les détails des puces de CV, point CV. Détails du tiret de balle. Donnez-lui une hauteur. 360 pixels. Donnez-lui une largeur de contenu ajusté. Spécifiez le rembourrage, 0. La balle de la raison. Bien sûr, il faut lire ces balles. Donnez-lui une largeur de 100 %. Marge, 30 pixels, 0. Enfin, pour les puces sélectionnées esquiver les puces sélectionnées. Et donnons une largeur de 100%. Je vais juste mettre en évidence, attraper, venir ici, coller ça. Très bien, donc si vous suivez mon exemple, obtiendrez certainement le même résultat avec moi. Enregistrez-la sur le navigateur. Rechargeons. Ensuite, fixez-le sur les plates-formes mobiles. Voici sur iPhone 5. Marquez vers le bas. Superbe. Voyez-vous maintenant ? Excellent. Très bien, sortons ça sur iPhone X. Perfect Guys. Allons gravier. Sur iPad Pro. Génial. J'adore ça sur iPad. Jetez un coup d'œil. Et enfin, moins sorti sur iPhone 6, 7 et 8 Clause. Tout est beau comme spectate. C'est donc soudainement le résultat que nous attendons de cette conférence. Tout est beau et j'aime ça. Très bien, donc c'est tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 34. Composante Testimonial et Carousel de Testimonial: Bienvenue dans les voitures. Très bien. Commençons à travailler sur la composante témoignage. Et à la fin, nous allons avoir un témoignage très beau comme celui-ci. Jetez un coup d'œil. Pouvez-vous le voir ? N'est-ce pas beau ? Très bien, alors commençons rapidement. Retournez au code VS. Cliquez avec le bouton droit de la souris sur le témoignage de poche. Le voici, cliquez avec le bouton droit ? Et maintenant, nous allons créer le composant correspondant. Voici donc un nouveau dossier. Et cela s'appellerait le point testimonial js. Créons le fichier CSS correspondant. Cliquez avec le bouton droit sur Témoignage. Nouveau fichier. Témoignage Dot css est magnifique. La prochaine ligne consiste à installer le OWL Carol est 0. Alors, elle est sur le terminal. Ici, sur le terminal, je suis dans le répertoire racine. Allons donc au client. Pour ça. Je vais juste faire du client CD. Et là, je vais faire npm install, React Dash, Dash Cruiser. Pour continuer. Chauffez sur la touche Entrée de votre clavier. L'installation est en cours. Installé, réussi. La prochaine ligne consiste à lier ce projet à jQuery. Factory pourrait aider et copier le script jQuery. Matériaux. Cela pourrait aider notre score à baisser. Nous avons donc ici le script jQuery, surligner, copier. Retournez au code VS. Maintenant, je vais juste chercher index.html. Je préfère le chercher de cette façon. Vous pouvez donc le définir dans l'Explorateur. Faites défiler le script jQuery vers le bas ici. Enregistrez le projet. Fermez ensuite le fichier index.html, accédez au témoignage, générez le composant fonctionnel React js. Nous importons donc ici le Caruso OWL de React Dodge OWL kairos. Retournez au code, comment plus de temps. Et ici, nous devons copier cette importation. Copier. Veuillez ne pas les copier ici. Ce n'est qu'un titre et diverses raisons pour lesquelles j'ai placé ce signe de commentaire ici. Ne copiez pas cette ligne, n'est-ce pas ? Ce sont les lignes nécessaires. Copiez, revenez au code VS, puis collez. Importons donc l'en-tête de l'écran, qui est le composant réutilisable. Et bien sûr, vous devriez maintenant savoir comment le faire. en-tête de l'écran de démarrage des utilitaires, titre de l'écran de démarrage GAS est également importé ce réticule via une visualisation de choc des utilitaires. Et ici, nous devons également importer l'animation est la prochaine en ligne est d'implémenter la vis lisse et l'effet de décoloration. Par conséquent, je n'ai qu'à copier ça de moi. Je vais juste le coller. Superbe. Après avoir fait cela ici dans Steve, nous allons afficher l'en-tête de l'écran. Et il a un titre d'attributs. Ici, nous allons faire un témoignage. Et bien sûr, il y a un sous-titre d'attribut. Ici, nous allons le faire ici. Nous allons avoir une section avec le nom de classe d'une section de témoignage. Je sais que la plupart d'entre vous s'attendaient à ce que ce soit dv, nom de classe de la section du témoignage. Et ici, nous allons lui donner une pièce d'identité, un ID de point d'appui. Cette fonction va donc la choisir améliore la sécurité. Maintenant, nous devons ajouter ces composants mais l'écran commun P. Et ensuite je vais mettre des bottillons communs. Et ici, nous allons importer des témoignages à partir du témoignage de la barre oblique de conteneur de portefeuille. Témoignage. Superbe. Et pour l'instant je vais juste dupliquer ce code. Ici. Nous devons changer le nom en témoignage. Et ici, la composante est un témoignage. Retournez au terminal et je vais faire du NPM, commence. Superbe. Nous avons maintenant un témoignage affiché à l'écran. Et voici le composant réutilisable. Visser à moins que la vérification de la nymphe apparaisse comme une navigation en haut. C'est ici que vous pouvez le voir lorsque vous cliquez sur ce témoignage des composants du témoignage. Superbe. Revenez au code VS. Nous n'avons plus besoin des pommes de terre communes. Fermez-le vers le bas. Et nous n'avons pas non plus besoin de moi. Fermez-le vers le bas. ce moment, nous sommes dans le témoignage de JS. Donc, dans cette section, nous allons avoir une div avec le nom de classe du conteneur. Et bien, dans ce conteneur, nous allons avoir une autre div avec le nom de classe de ligne et un droit dans ce rôle. Ensuite, nous devons appeler le OWL Caruso. Je vais faire OWL et c'est beau ? Nous allons donc donner le nom de classe pour les flèches bleues. Et nous allons lui donner une pièce d'identité, témoignage ARF, un tiret de témoignage, un carrousel. Et ici, nous allons avoir une autre div avec le nom de classe de. Il s'agit donc d'un nom de classe Bootstrap, tiret de colonne, un tableau de bord 12. Et ici, nous allons avoir une div, lui donner un nom de classe de ces éléments de tiret T et écrire dans le test l'élément. Nous allons également avoir une div avec le nom de classe du commentaire S T dash. Et ici, nous allons avoir un tag p. C'est juste pour le bon travail. C'est bon ? Donc, dans ce tag p, j'ai déjà écrit. Je dois donc juste revenir au code. Et ici, vous allez voir un témoignage. Maintenant, je vais juste copier ces lignes de hé, viens ici, coller ça. C'est vrai ? Formatons donc ce code en cliquant avec le bouton droit de la souris Formater le document avec. Pouvez-vous le voir ? Incroyable. Nous voulons que cela apparaisse sous forme de citation. Ce que je vais faire maintenant, c'est terminer ce témoignage avec une étiquette « I ». Ensuite, nous pouvons spécifier l'icône. Et ici, je préfère avoir l'étiquette à fermeture automatique. Nous allons donc avoir un ClassName, une classe bootstrap de FASFA, dash, dash, à gauche. Cela va donc générer l'icône de guillemets gauche. Maintenant, je n'ai plus qu'à copier ça. Venez ici, collez, changez-le en cour juste après la balise p de fermeture. Nous allons avoir une étiquette UL. C'est vrai ? Dans cette balise UL. Nous allons avoir l'étiquette LI ici. Nous allons avoir une étiquette « I ». Maintenant, nous voulons simplement implémenter le taux et les icônes. Laissez-moi vous montrer rapidement. Je dois donc arrêter ces commandes C pour arrêter l'amino. Très bien, c'est donc ce que nous voulons mettre en œuvre. Les icônes de notation ici. Et voici les guillemets doubles que nous venons d'implémenter. Voyez-vous que c'est exactement comme ça que le témoignage va apparaître à l'écran. Donc ici, avant de procéder à d'autres choses, nous devons garder cette étiquette UL, un nom de classe, un tiret. Très bien, alors concentrons-nous maintenant sur les balises I. Et ici, nous allons donner un nom de classe, le tableau de bord FASFA. Je préfère donc également avoir l'étiquette à fermeture automatique. Nous allons maintenant mettre en surbrillance la balise LI, copier et la coller. Collez-le encore et encore. Donc, nous allons avoir un bord FASFA, sortez. Offrant ainsi des balises LI et faites défiler vers le bas. Et ici, nous allons faire une div, lui donner un nom de classe de clients à l'automne, n'est-ce pas ? Dans les informations du client. Nous allons avoir la photo du client, le nom et la position du client. Pour ce faire, nous devons importer les photos nécessaires. Soyez la fenêtre contextuelle, l'explorateur, réplique publique ici sur New Folder. Et cela s'appellerait IMG. Retournez dans le dossier Materials ouvert. Et voici le témoignage, n'est-ce pas ? Dans le dossier de témoignages, nous avons toutes les images inutiles qui sont pertinentes pour la composante témoignage. Et voilà maintenant ouvrir le portefeuille pro client SRC, n'est-ce pas ? Nous devons chercher le public. Et voici l'IMG, créé il y a quelques secondes. Et maintenant, je dois revenir en arrière, copier tout ce paquet, qui est le témoignage. Collez-le directement à l'intérieur de l'IMG. Common V. Beautiful. Fermez-le, fermez-le vers le bas. Retournez au code VS, puis vérifions cela. Voici l'IMD. Cliquez pour ouvrir, puis voici le témoignage. Et toutes ces photos sont pertinentes. Nous allons donc avoir la balise IMG, SRC. Nous devons faire référence à la classe de témoignage img slash de poche . Nous voulons maintenant utiliser cette photo. Tennessee. Le nom est donc Lady Dot PNG. Maintenant, donnez-lui une connexion Internet étrange. Les cotes sont affichées à l'écran cas de problème lors du chargement de l'image. Enregistrez, retournez au navigateur et déteste ça. Nous allons maintenant spécifier le nom du client. Et ce que nous allons utiliser H5 pour cela. Je vais donc faire qu'ils voient dominer. Maintenant, pour le poste. Nous allons utiliser une balise p pour cela. Supposons donc que cette dame soit PDG. Je vais faire CEO, Global. Économisez, jetez un coup d'œil. Voici donc le nom du client. Et en dessous se trouve la position. Superbe. Le nid et la ligne doivent dupliquer ce code trois fois. Ou vous pouvez copier et coller trois fois c'est la même chose. Alors regardez-moi comme je copie d'une div avec le nom de classe du collage ou 12. Je dois vous le dire si clairement pour que vous ne rencontriez pas d'ennuis. Et cette div, NCAA des lignes 32, lignes 67. Alors regardez-moi comme je le souligne. Maintenant, je vais maintenir la touche Maj enfoncée et la flèche vers le bas de votre clavier. 3 fois 1, 2, 3. Et cela économise-t-il ? Retournez dans le navigateur, rechargez-le. Pouvez-vous voir ce dossier ? Pour l'instant ? Nous ne verrons pas d'effet de séquestre simplement parce que nous n'avons pas implémenté ce Caruso. Très bien, donc nous en avons fini avec l'interface utilisateur. Et lors de la prochaine conférence, nous mettrons en œuvre les kairos. Je vous verrai lors de la prochaine conférence. Restez concentré et prenez soin de vous. 35. Mettre en œuvre le Carousel de preuve à l'aide de React Owl Carousel: Très bien, nous allons maintenant travailler sur le témoignage de Kairos. Et à la fin de cette conférence, les témoignages défileront du bord droit de l'écran vers la gauche de l'écran. Commençons rapidement. Elle est sur le code VS. Par ici. Avant de continuer, nous devons apporter les changements nécessaires. Commande B pour ouvrir l'explorateur. Et puis laissez-moi vous montrer ici le point de témoignage CSS. Lorsque j'ai suivi la conférence précédente, j'ai réalisé que les témoignages, CSS, n'étaient pas correctement orthographiés. suffit donc de cliquer avec le bouton droit de la souris sur le CSS du témoignage, puis de cliquer sur Renommer. Par ici. Assurez-vous que ce que vous voyez à l'écran en ce moment est identique à celui que vous avez sur votre code. Vous devez donc apporter les corrections nécessaires. Auparavant, il y en avait un ici. Laissez-moi vous montrer comme ça. vous suffit donc d'effacer l'OH, puis de chauffer la touche de retour de votre clavier. Magnifique. Nest, faites défiler. Laissez-moi vous montrer. J'ai ajouté quelques images du client. Voici donc le Lady Dot PNG. Et quand vous passez au prochain client, j'ai Mike dot PNG. Vous pouvez donc modifier toutes ces images. Et ces images sont ici dans un ensemble de témoignages. B, faites défiler jusqu'à la république. Ici, IMG, et puis voici le Lady Dot PNG. Png et Mike Dot PNG. OK. Fermez ce témoignage JS. Je dois apporter les vôtres à nouveau. Faites défiler vers le haut Implémentons maintenant les options de const du carrousel , puis définissons les objets vides. Et ici, nous allons avoir la boucle pour être vrai. Nous pouvons donc avoir une répétition constante des témoignages. Pour la marge. Faisons en sorte que 0 soit séparé par une virgule, puis nerf ici, vous pouvez le rendre vrai ou faux. Et émettre en bornes, non ? Illimité comment Lewis de lui mais de le séparer avec une virgule et ensuite pointiller ces opérations booléennes. Faisons donc que c'est vrai. Vous pouvez le désactiver à votre extrémité en le définissant sur Faux. Lecture automatique. Nous le voulons à une vitesse intelligente. En quoi consistent les portes de lecture automatique, lorsque vous ouvrez le navigateur, qui est le site Web, vous n'avez pas besoin de cliquer sur un bouton pour le témoignage commence à défiler. Cela va donc se faire automatiquement. Par rapport à la vitesse à laquelle ces témoignages vont faire défiler du bord droit de l'écran vers la gauche de l'écran. Vous pouvez décider d'augmenter la vitesse et réduire la vitesse. Il est maintenant temps de le rendre réactif. Ces objets, ça va en être un. Il me suffit donc de le mettre en évidence puis dupliquer deux fois. Par ici. Ne vous inquiétez pas, je vais vous faire tourner tous ces onglets. Et ici, nous allons en avoir 768. Enfin, nous allons en avoir 100 et les écrans que nous voulons être trois. Donc, si j'entends un écran compris entre 0 et 768 pixels, le témoignage va apparaître une colonne et une rangée, n'est-ce pas ? Dans. Sur un ordinateur portable, un ordinateur de bureau et un iPad, il apparaîtra en trois colonnes. Et seulement des appareils plus petits comme l'iPhone ou le Samsung, il n'apparaîtra qu'un deux-points, n'est-ce pas ? Oui, c'est exactement ce que nous avons fait ici. Enregistrer, faites défiler vers le bas jusqu'à l'endroit où vous avez le OWL Caruso. Maintenant, je vais ouvrir et fermer le support bouclé. Nous devons maintenant prendre en compte les actions de l'opération. Enregistrez, revenez au navigateur et jetons un coup d'œil. Voyez-vous que c'est si beau que j'aime ça. Maintenant, le témoignage fait défiler du bord droit de l'écran vers la gauche de l'écran. Très bien, c'est souvent pour cette conférence. Et dans la prochaine conférence, nous commencerons à styliser ce continent et tout ira bien. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 36. Sculpter: Très bien. Commençons donc à styliser la composante témoignage. De l'héroïne au code VS. Ouvrez le CSS du témoignage. Et voilà. Fermez la commande de l'explorateur B. Juste ici. Nous allons commencer par la section Témoignage. Section Témoignage. Et le rembourrage. Il va faire 80 pixels. Il y a 80 pixels. URL de l'image d'arrière-plan. Et si je l'entends, nous devons importer l'image que nous voulons utiliser pour l'arrière-plan. Maintenant, ouvrez le dossier des matériaux. Il doit se diriger vers un bureau où il se trouve à mon extrémité. En bas, il y a les matériaux, n, voici le témoignage ou a été ouvert au portefeuille pro client SRC actifs. Je vais juste faire glisser ça sur le côté. Retournez en arrière. Je vais donc copier toute la poche. Copier. Venez ici, juste dans les atouts. Je vais juste coller, le fermer, le fermer, puis me diriger vers le VS Code. double citation ici. Nous devons aller de l'avant pour chauffer le SRC. Actifs de barre oblique Src. Témoignage. N. Voici l'image de fond. Bitty Dash un point JPEG. La position de fond. Mettons-le au centre. La pièce jointe à l'arrière-plan. Nous allons le faire réparer. Et la position. Faisons en sorte que ça se rapporte. On se voit. Et pour l'index Z, l'index Z tiret, faisons moins un. Économisez. Retournez au Témoignage JS et moins le liez au fichier CSS. Faites défiler jusqu'en haut. Et ici, je vais juste importer des points testimonial css, sauvegarder sur le navigateur et regardons ça. Rechargez. C'est vrai ? Bon, voici donc l'arrière-plan. Donc, lorsque je fais défiler vers le haut, vous verrez l'arrière-plan être fixé à l'écran. Voyez-vous que l'arrière-plan ne bouge pas ? Cela ne change pas simplement parce que nous avons l'attachement à l'arrière-plan à corriger. Maintenant, voyez-vous bien, c'est ça. Nous sommes sur le nid CSS testimonial. Nous devons faire la section témoignage avant. Je vais juste les copier. Collez, fermez les crochets bouclés. Et ici, nous allons avoir deux points avant. Et ici, nous allons avoir le contenu pour être vide. Et la position absolue. Le 0 gauche, le 0 supérieur, la largeur, 100 %, la hauteur, 100 %, l'indice Z. Je vais donc juste faire copier ça parce que c'est exactement la même équipe. L'opacité n'aura pas de 0 à Harvard, c'est cinq. Maintenant, nous allons avoir la couleur d'arrière-plan. Bon, alors sauvegardez-la sur le navigateur et regardons ça. À quel point sont-ils beaux, n'est-ce pas ? Ainsi, lorsque vous la regardez de près, vous vous rendrez compte que l'image d'arrière-plan est maintenant transparente simplement parce que nous avons placé une autre barre au-dessus de celle-ci et que nous spécifions ensuite l'opacité. Laissez-moi vous montrer rapidement. J'ai eu le code VS et voici ce qui l'a rendu transparent, n'est-ce pas ? Donc, quand je réduit l'opacité à 0,5, économisez, revenez ici. Voyez-vous ? Maintenant, il devient plus transparent. Je pense donc que notre 85 point zéro serait cool pour cela. Vous pouvez donc spécifier dans la valeur d'un choix, est-ce mortel ? Tu l'aimes bien ? Maintenant, nous allons styliser sont le point FUTA, le foo dot, l'image de tableau de bord. Avec 100 %. La hauteur, bien sûr, ça va être 100%, donc je dois juste le copier à partir d'ici. Et au maximum, nous avons 1920 pixels. Débordement, chauffage. Nous allons le faire afficher flex, justifier le contenu. Je suppose que tu sais, centre. Et puis le haut de la marge. Nous le voulons Manoj, un pixel non nul. Économisez. Sortons ça sur le navigateur. Faites défiler vers le bas Voyez-vous maintenant que la courbe ici apparaît en fait, mais pas en tant que spectateur. Alors ne vous inquiétez pas, alors que nous procédons à la stylisation de ce composant, nous aurons tout parfaitement bien. Très bien, alors revenez ici. Maintenant, nous allons faire pour l'image IMG. Maintenant, nous allons avoir la largeur maximale, 100 %. Et la hauteur en pixels. Retournez en arrière et voyons une fois de plus. Est-ce que tu vois ça ? C'est beau ? Je l'aime bien. Nous avons maintenant les résultats attendus à partir de l'horizon temporel. Continuons avec le carrousel. Et ici, nous devons styliser qui teste l'ITA. Je n'ai donc qu'à copier ça. Revenez ici, puis collez l'élément Dash Dash. Donnez-lui une couleur d'arrière-plan. Faisons le blanc. Rembourrage, 30 pixels. Enregistrez-la sur le navigateur. Très bien, ça a l'air bien, mais il faut le faire bêta. Revenez maintenant au code VS. Nous devons maintenant donner le cap sur le rayon de la frontière. Nous voulons que cette bordure de cheveux soit un peu sinueuse. Maintenant, je vais faire le rayon frontière. 50 pixels du haut, 50 pixels à partir de la droite, 50 pixels en bas. Ensuite, nous voulions 0 pixels en bas à gauche. Enregistrez, revenez au navigateur et voyons. Très bien, nous avons maintenant appliqué le rayon à tous les coins, à l'exception du coin inférieur gauche. Et quand vous le regardez de près, vous vous rendrez compte que le bord est très pointu. Et comme pour le reste des coins, cela pousse notre propre courbe en ce moment pour le tag p directement à l'intérieur d'un équipement de test. Je vais donc juste mettre en évidence cette copie, descendre, coller, fermer les crochets bouclés. Ensuite, nous voulons styliser le tag p. Et bien sûr, vous pouvez toujours faire référence à ce témoignage JS si vous n'êtes pas sûr des noms de classes. Maintenant, pour la taille de police, 16 pixels, hauteur de ligne, 26 pixels. Les téléphones que nous mangeons 100, donc cela fera son tick aérobie. Et à bord. La marge. Margin, nous allons avoir ces erreurs de dix pixels. Et pour la ville des téléphones, nous voulons qu'elle apparaisse en italique. sauver, n'est-ce pas ? Ok, maintenant, pouvez-vous voir maintenant que la police apparaît inclinée à cause de cela. Très bien. La prochaine ligne est donc de styliser la citation. Maintenant, je vais juste copier cette colonne ici. Coller, fermer avec le support bouclé. Et puis je vais faire Dot, FA, Dash, Dash, Left. Nous n'avons pas grand-chose à faire ici, juste la droite marginale. Faisons cinq pixels. Et la couleur de l'icône de l'œil, qui est la citation elle-même. Donc moins le Commodore de Mickey. Et puis, avant de continuer, c'est censé être laissé. Je suis vraiment désolée pour ça. C'est vraiment une erreur typographique. Sauvez, venez ici. Maintenant, la citation restante est en bon état. Je dois donc juste souligner les frais et les dupliquer. Donc, ici, nous devons le changer pour citer, non ? La couleur reste donc la même. Et ici, ce sera la marge gauche. K. Maintenant, la citation est en bonne forme. Maintenant, pour la note. Je vais donc venir ici, copier ça encore et encore. Collez, fermez les crochets bouclés. Nous voulons styliser les icônes d'aération, qui sont les étoiles. Ici, nous allons avoir testé les étoiles de points de commentaires. Après cela, je vais copier le collage. Et maintenant, nous voulons styliser le tag LI. Et toutes ces classes sont ici dans le témoignage j is. Maintenant, ce sont les étiquettes LI que nous traitons. Témoignage de Toronto CSS. Alors, pour les stars, laissez-moi vous montrer. Vous le voyez comme cela apparaît comme ça. On n'aime pas ça. Nous devons donc le faire afficher, bloquer en ligne, enregistrer, vérifier. beau, j'aime bien. Tout est presque terminé. Continuons donc. Indiquons les droits de marge. Tout ce que je vais faire en ce moment, c'est de mettre en surbrillance et de dupliquer ce code. Venez ici, nous voulons styliser l'étiquette I. Laissez-moi vous montrer encore une fois. Voici le tag I, non ? Quelle est l'icône elle-même. Voyez-vous ? Je vais donc effacer ça. Nous allons dimensionner l'icône. Accédez à la taille du formulaire de 30 pixels. Et la couleur va être tomate. Enregistrer sous, vérifiez-le à nouveau. Génial. Retournez au code VS. La ligne suivante est l'information du client, les informations des points. Alors vite, faisons-le. Position. Relatif. Pardon à gauche, 80 pixels, rembourrage supérieur de 80 pixels et la hauteur moyenne est de 60 pixels. C'est vrai ? Avant de continuer, un haut de rembourrage doit être de cinq pixels. Vous pouvez donc vous rendre sur le navigateur pour le vérifier. Mais pour moi, il me suffit de procéder pour que nous puissions finir rapidement. Il faut maintenant styliser les images. Ces images ici. Très bien, je vais tout copier ici. Venez ici, collez, fermez les crochets bouclés. Ensuite, je vais faire IMG pour cibler les images. Donc, pour la hauteur 70 pixels, la largeur 70 pixels. La frontière. Nous allons avoir ses deux pixels , solides et transparents. La couleur de la bordure. Faisons le noir. À partir de la gauche, 0, 0 en haut. Sauvez votre réforme. Maintenant, il faut que la bordure du cadre soit circulaire, n'est-ce pas ? Alors revenons en arrière et faisons-le rapidement. Il nous suffit donc de gérer le rayon de la frontière. Fais-le 50 pour cent. Économisez. Maintenant, pouvez-vous voir, oh, magnifique. J'aime ça ici dans le code VS à moins de continuer. Et nous allons avoir sa position. Absolu. Épargnez encore, tout est comme prévu. Superbe. Je l'aime bien ici sur VS Code. Nous devons donc maintenant styliser le H5 et un tag p. Je vais juste les copier. Collez, fermez le support bouclé. Et cette fois, nous devons cibler la haie cinq. Donnez-lui une taille de police de 16 pixels. La police que nous verrions est 100. Cela va donc le rendre épais. Hauteur de ligne, 26 pixels. Marge. Économisez. Très bien, enfin, nous devons styliser le tag p. Permettez-moi de vous montrer le tag p. C'est le hit F5, puis il s'agit de la balise p. Le nom du client est donc inscrit sous l'âge de cinq ans. Et le rôle du client est enroulé dans une étiquette P, punition du visage droit est nettoyée, sorte que tout le monde devrait avoir une bonne compréhension de ce que nous faisons ici. Maintenant, je vais juste copier ça à nouveau, la balise p cette fois. Nous allons donc avoir la taille de police. Copiez à partir d'ici, collez et la hauteur de la ligne. Également. Copie d'ici. Collez le téléphone pour copier à partir d'ici. Collez, mais cette fois, ça va être 400. Et la marge est de 0. Enregistrez-la sur le navigateur. Est-ce que tu vois ça ? beau, j'aime bien. Jetons maintenant un coup d'œil sur les plateformes mobiles. Voici un iPhone S. Faites défiler vers le bas. Superbe. Donc, iPhone six. Joli. Jetons donc un coup d'œil sur iPad Pro. Et voilà sur iPad Pro ? Il apparaît très bien. Je l'aime bien. Enfin, nous devons vérifier le Galaxy S5. Faites défiler vers le bas Par exemple, c'est exactement le résultat que nous attendons de cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 37. Créer le composant ContactMe: Bienvenue sur le cours. Très bien, maintenant, nous allons travailler sur le composant Contactez-moi. Et le composant se compose de deux sections différentes. La première est l'interface utilisateur, qui concerne le frontal, et la seconde est le backend. Et à la fin, vous pourrez recevoir des courriels d'un client. Réponse à cet e-mail via ce site Web de portefeuille. Ça a l'air génial, non ? Superbe. Heron au code VS à moins de continuer. Le premier que nous allons faire ici est donc d'importer les fichiers nécessaires, c' est-à-dire les images correspondantes. C'est une histoire vraiment amusante à propos de MON composant. Maintenant, ouvrez le dossier des matériaux. Matériaux. Ensuite, vous verrez ces images en poche ici. Maintenant, ouvrez le client Portfolio Pro. Cliquez sur SrC. Ensuite, nous allons copier ce dossier ici, puis le coller ici. Voyons ce que nous avons. Nous avons la charge, qui est le GIF que nous allons utiliser. Nous avons l'image d'arrière-plan du mailing. Laissez-moi vous montrer quelles sont les portes. Il suffit de fermer ça, puis de le fermer. Navigateur actuellement une fois de plus. Et si j'entends quand je clique sur le bouton d'envoi, vous allez voir le Seigneur dans Bob. Le voyez-vous ? Superbe. Créons les composants correspondants. Conteneur de portefeuille de Toronto. Et voici le répertoire contactez-moi que nous avons créé précédemment lors des conférences précédentes. Je vais donc simplement cliquer avec le bouton droit ici sur New File. Ensuite, je l'appellerai contactez-moi dot js. Et rapidement, nous devons créer le fichier CSS correspondant. Contactez-moi Dot CSS, ici pour me contacter js. Nous allons cacher l'explorateur. Générez le composant fonctionnel React js, RFC. Superbe. Nous devons maintenant effectuer les importations nécessaires. Nous allons donc importer ici. Je suis le slash des images obliques SRC de débogage. Voyons maintenant Yvonne nom des images de sont là. Maintenant, nous avons les mâles points JPEG. Donc je vais juste faire des pointes JPEG pour les mâles. Et ici, nous devons importer le mur des barres de chargement. Je vais juste appeler ça la boucle un. Très bien, dans le même répertoire. Ici, nous devons importer les utilitaires de composants réutilisables, splash, en-tête d'écran, en-tête d'écran. Et ici, nous devons importer, Importer le service de défilement à partir des utilitaires défilement. Et aussi, nous devons importer l'animation est des utilitaires. L'animation, c'est. Et que devons-nous importer ? C'est vrai ? On dirait un nom. Ceux-ci vont bien se passer. Et puis la ligne imbriquée consiste à implémenter ce défilement fluide et l'effet de décoloration. Il faut donc venir ici, prendre ses accessoires ici. Maintenant, nous les avons implémentés en plusieurs composants, donc je dois revenir à propos de moi js et ensuite. Bonjour, Ok, ça est déjà mis en évidence, donc je vais bien, à des fins d'enseignement, je dois le faire moi-même. Maintenant. Moins de surlignements des lignes 92, 15, copie. Retournez me contacter. Et ensuite, ici, il suffit de coller. Bon, donc avant de continuer, nous devons ajouter ces composants à l'écran. Maintenant, Heroku est commun. Très bien, nous devons donc importer. Contactez-moi. Pouvez-vous voir les gars, cela va automatiquement les importer pour moi quand je clique ici et que je boom, il est importé. Je sais donc que la plupart d'entre vous pourraient avoir mal à faire ces H2 et je dois donc le faire manuellement moi-même. Oui. Alors laissez-moi l'importer monogame, contactez-moi à partir de la barre oblique de conteneur de portefeuille, contactez-moi, slash contactez-moi. Et maintenant, je crois que tout le monde est d'accord avec ça. Nous devons donc l'ajouter à des constantes ici. Maintenant, je n'ai plus qu'à les souligner. Maintenez les touches Alt et Maj enfoncées , puis appuyez sur la flèche vers le bas de votre clavier. Est-ce que tu vois ça ? Pour l'instant, nous devons changer le nom pour me contacter. Et ici, le composant devrait me contacter. Économisez. Retournez me contacter JS. Et juste ici sur le DV, nous allons donner à cette div un nom de classe de conteneur de tiret moyen. Donnons donc un identifiant pour que nous ne puissions pas naviguer vers ces composants. Premièrement, le nom de l'écran est cliqué. Je vais donc faire des accessoires ici. ID de point. Maintenant. Soigneusement. Si rapidement moins que cela, ce sont des composants réutilisables pour afficher quelque chose à l'écran. Maintenant, je vais faire de plus près l'écran avec la balise à fermeture automatique. Et en supposant que non, nous l'avons fait lors des conférences précédentes. Maintenant, le sous-titre que je vais faire ici, moins rester en contact. Très bien, donc je pense que si vous les faites, accord, c'est mieux de cette façon. Alors faites simplement le L le faire comme vous voulez qu'il apparaisse à l'écran, non ? Donc, oui. D'accord. Et l'autre attribut est le titre. Maintenant, je vais me contacter. est beau, je pense que ça va. Économisez. Retournez au terminal, puis au client CD. Et puis on ne va pas commencer. Très bien, attendons ça. Superbe. Maintenant, nous avons le composant Contactez-moi à l'écran. Déconne et voyons si le nom a été ajouté. Assez debout. Les gars de Parfit ici sont compatibles. Donc, lorsque je clique sur Contactez-moi, cela nous amène ici. Héroïne au code VS à moins de continuer. Amanda B, pour cacher l'explorateur. Maintenant, juste après la balise de fermeture de l'en-tête de l'écran, nous allons avoir une div, donner au membre de la classe ARF, un téléphone de tableau de bord central. Et un autre div, nom de classe du charbon. Donc maintenant, nous allons avoir React typique. Je pense que nous l'avons déjà fait auparavant, n'est-ce pas ? Dans le composant de profil. Passons donc à la composante de profil. Profil ab.js. Est-ce qu'il est venu ici ? Nous allons donc copier à partir de la couverture. Ce titre ici doit être copié. Retournez me contacter GS. Donc, avant de procéder à cette mise en œuvre, nous devons importer le désordre typique de React. Donc, en suivant les meilleures pratiques, nous devons importer un appel de type hey, import à partir de React Dash. Ok, donc après ça, je dois lui donner un espace comme ça. Et ici, il suffit de coller. Donc, tout ce que nous avons à changer, c'est la balise en-tête 1. Je vais donc simplement mettre en surbrillance et ensuite je vais appuyer sur Commande et D. Pouvez-vous voir que ces deux-là sont sélectionnés, l'étiquette de tête d'ouverture et l'étiquette de tête de fermeture. C'est ce qu'on appelle les multidiffusions en cours d'édition Fais-le H2 et 1000. Et là, nous ne l'avons pas fait, je vais donner ça à un nom de classe de titre. Maintenant, ce que je vais faire, c'est les mettre en évidence et frotter à votre extrémité humide choisir d'afficher plus d'informations. Mais pour moi, je veux simplement que ces informations soient affichées. Permettez-moi donc de montrer les informations d'un ici. Maintenant, je vais entrer en contact. Nous devons donc inclure ici les MOOG. Je crois que vous savez comment faire cela. Donc, pour ceux d'entre vous qui n'utilisent pas Mac, il vous suffit de copier et coller mon code pour obtenir ce MODS. Maintenant, j'ai besoin de ce symbole emo ici. Est-ce que c'est moins que la ligne, c'est les icônes des médias sociaux. Laissez-moi vous montrer. Voici les icônes des réseaux sociaux. Et si je me souviens que nous avons fait tous ces trucs dans l'aileron la conférence précédente lorsque nous avons mis en place la société de profil. Ainsi, dans cette conférence, la composante de profil va être très utile. Revenez aux composants du profil. J'ai foiré. Très bien, nous allons donc tout copier comme ça. surbrillance les droits de copie des lignes 122 et 26, puis revenez à me contacter, juste après la balise de fermeture du HA2. Je vais juste coller et visiter le magnifique MAN S pour sauver. Revenons au navigateur et voyons ce que nous avons fait jusqu'ici. Très bien, pouvez-vous voir ces autres icônes dans le coin inférieur gauche de l'écran ? Et j'espère que quelqu'un peut le voir. Je dois donc agrandir un peu ça. Et voici ce que nous avons fait jusqu'ici. Je ne veux pas que cette conférence prenne trop de temps, alors faisons une pause ici. Et lors de la prochaine conférence, nous procéderons à la création du formulaire de contact. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 38. Formulaire de ContactMe et variables d'état: Alors maintenant, passons avec le téléphone contactez-moi Harrington VS Code. Ici, Austin, nous allons déclarer les variables d'état nécessaires à utiliser. Je pense donc que nous devrions le faire ici. Bon, importons l'État américain. Il vous suffit donc de placer un état américain de caméra , puis de faire défiler vers le bas. Et ici, nous allons avoir Const. Et nous devons avoir le nom querelle, plus calme, setName pour utiliser States. Et l'état initial va être vide. Rien ne sera dans le flux pour la première fois. Je vais donc devoir le faire maintenant, c'est de le souligner et de le dupliquer quatre fois. Décalez et appuyez sur la flèche vers le bas de votre clavier. Bon, il faut donc changer ça par e-mail. Et ensuite, nous allons définir des e-mails. Remarque. C'est un cas rare. Nous allons donc la définir sur une chaîne vide, qui est l'état initial. Et ici, nous devons changer ce nom en message. Et ici, nous avons la bannière. Enfin, nous avons le booléen juste ici. Et bien sûr, vous devez savoir qu'il s'agit d'une opération booléenne et qu'elle doit renvoyer soit vrai, soit faux. Ici, les états initiaux seront les avant-bras. Créons maintenant rapidement le formulaire de contact. Donc ici, juste après cette div de clôture, nous allons avoir une div, donner le nom de classe de tiret. Et nous allons aussi avoir une div ici, donner le nom de classe de IMG Dash. Et ici, nous allons avoir une couverture pour IMG SRC. Je suis débogage. Nous allons donc lui donner un OT. Je pense donc que nous devrions le fermer avec l'étiquette à fermeture automatique. Très bien. La prochaine ligne est donc de faire baisser le score téléphonique juste après cette div de clôture ici de ClassName IMG. Nous allons avoir le téléphone ici. Nous allons avoir une étiquette P. Ne vous inquiétez pas pour l'instant car je vais vous montrer. Nous allons donc avoir une étiquette ici. Donnons un nom de classe. Et je vais le faire car le slogan va être nommé. Nous allons avoir le type d'entrée test. Et je préfère aussi l'étiquette à fermeture automatique pour ces beaux. Ce que je vais faire ensuite, c'est les mettre en évidence, comme ceux-ci. Dupliquez-le deux fois. Ou vous pouvez copier et coller deux fois. Le nid est l'e-mail. Je vais donc le changer par e-mail. Changez-le par e-mail. Le type ici sera le courrier électronique. Et ils seraient utilisés pour le message. Et le message. Enregistrez et courez. Retournez au navigateur et laissez-moi vous montrer. Voici l'image. Laissez-moi vous montrer. C'est le dos IMG que nous avons importé aileron et nous l'avons montré ici. Maintenant, voici la haie pour. Donc, lorsque vous regardez de près, vous verrez les trois champs de saisie. Permettez-moi de zoomer un peu. Voici le nom, l'e-mail et le message. Mais je ne veux pas que la boîte de message ait la même taille que les autres champs. Pour cela, nous devons utiliser la zone de test comme empalée. Retournez à VS Code. Et là où vous avez l'entrée, nous allons le changer en zone de test. Économisez. Retournez en arrière. Maintenant, voyez-vous qu'ils ont raison, donc nous avons notre apogée sous le reste des champs comme cela. Mais une chose que je veux vous montrer, c'est lorsque vous tapez quoi que ce soit, ces champs de saisie ne fonctionnent pas. Laissez-moi vous montrer ce que je veux dire par là. Je vais donc faire un zoom arrière un peu. Je vais inspecter ça. Et regardons ça sur la console. Vous voyez que lorsque j'utilise les champs de saisie, rien ne se passe. Il ne se passe rien. Cela signifie donc que ces champs ne fonctionnent pas. Très bien ? Nous devons donc gérer l'impédance. Revenez maintenant au code VS. Et je pense qu'avant de faire cela, il suffit de mettre en œuvre le fond. Nous allons donc mettre en œuvre rapidement le fond. Juste après la zone de test. Nous allons avoir une autre div, donner le nom de classe ARF, envoyer Dash. Et ici, nous allons avoir un Bolton. Nous allons donc faire le type d'entrée du Bolton. Bien sûr, va être résolu signifie que l'étiquette va être envoyée. Nous voulons donc afficher une icône en bas. Nous devons prendre le tag I puis lui donner un nom de classe de la barre de tableau de bord FASFA. Désolé, le papier ne doit être qu'un seul plan P xy. C'est bon ? Et j'aime aussi fermer avec l'étiquette à fermeture automatique. Ok, je pense que tout est sympa phénomène. Découvrez-le sur le navigateur. Et nous avons deux k. C'est le bas d'un ici. Dans le coin inférieur gauche de l'écran. Voyez-vous que c'est la navigation de plaisance. Retournez au code VS. Nous devons donc maintenant gérer l'impédance. Faites défiler vers le haut et définissons une fonction pour cela. Donc maintenant, nous allons avoir une constante et je vais appeler ça le nom de miellat. Réglez-le sur notre fonction, puis prenez un événement. Magnifique. Ici, nous allons faire des événements SetName, des points, des cibles, des valeurs de points, les mettre en surbrillance, les dupliquer deux fois. Et ici, nous devons le changer par e-mail. Il s'agira également d'e-mails. OK. Oui. Et ici, il devrait y avoir moins d'âge. OK. Tout est plus frais. Faites défiler vers le bas sauf si vous n'êtes pas implémenté sur Nous devons donc commencer par le nom, qui est le champ nom. Et maintenant, nous devons rester inchangés. Nous allons appeler le nom de la fonction et la valeur doit être nommée. Barre de défilement. Essayons ça. Il va falloir recharger. Très bien, donc ici sur la console, nous allons voir l'effet de changement. Je vais donc taper N. Sortons ça sur la console. Ok, alors quand je le fais, je peux voir ce qui est inchangé ici. Vous voyez donc c' est exactement ce que les portes de change. En bref, l'événement onchange dans React détecte la valeur d'un élément en entrée. Ça a l'air bien, non ? Magnifique. Retournez au code VS à moins qu'il implémenté dans tous les champs. Et la même chose que Lee, nous allons faire pour le courriel. Nous n'aurons donc aucun changement. Et rappelez-vous, il s'agit d'une affaire de karma. Nous allons appeler la fonction Handle email. La valeur, bien sûr, sera un e-mail. Enfin, nous devons le faire pour le message. Je n'ai donc qu'à copier cet appareil photo ici. Coller. Et veuillez modifier la fonction pour gérer le message. La valeur que nous allons avoir ici provient donc de la boîte de message. Enregistrez, revenez au navigateur. Alors donnons un omble. Ouvrez la console, faites défiler vers le bas pour obtenir le nom que je vais faire. C'est donc Mike que je peux trouver pour l'e-mail que je vais faire. Bon, et pour le message. Donc je dois juste faire le VIH. Hé, que se passe-t-il ? Les pieds n'ont pas la valeur. Le voyez-vous ? Il apparaît ici sur la console, mais la valeur ne l'est pas, ne saisit pas la valeur. Bon, revenons au code VS et faisons-le réparer. J'ai foiré, non ? Des amis. C'est censé être un message et l'espoir d'obtenir ou ira bien cette fois-ci. Très bien. Bon, revenez au navigateur. Nous devons recharger. Essayons maintenant le message. Très bien, tout fonctionne parfaitement bien. Donc, phrase, c'est tout pour l'instant, pour cette conférence et dans la prochaine conférence, nous commencerons à styliser cette société est, à vous voir dans la prochaine conférence. Restez concentré et prenez soin de vous. 39. Composant de ContactMe de styliser: Nous allons donc styliser les entreprises de contact me. Et à la fin, vous aurez l'air dans ce beau. Retournez au code VS, sauf si vous continuez. Ouvrez le CSS de contact me. Jeu de P commun pour me contacter CSS. Et voilà. Commençons par le conteneur principal, le conteneur tableau de bord moyen. Nous allons donc lui donner une hauteur moyenne de 100 vh. Pour la forme centrale, point central. S'amuser. Nous allons avoir la largeur maximale, le rembourrage. Faisons en sorte qu'il affiche Flex. Et le rayon de bordure des pixels. Marge 0 sortie. Beaucoup de direction de flexion va être coelom. Justifiez le centre de contenu. Et pour la couleur de fond. Nous allons avoir ici. Économisez. Nous devons maintenant lier le CSS contact me aux composants contactez-moi. J'ai ouvert le contact avec moi. Faites défiler jusqu'en haut. Je pense donc que nous devrions le faire ici. Enregistrez, retournez dans le navigateur à moins de le récupérer. Très bien, nous avons maintenant le conteneur principal. Je peux voir. Mais il y a un problème avec cette image, c' est-à-dire le sac IMG. Nous allons certainement régler cela à l'avenir. Alors, rendez-vous sur VS Code pour me contacter. Et ici, continuons avec la forme centrale H2. Permettez-moi de vous montrer correctement l'historique et de taper l'effet. Où avons-nous l'effet de type, je pense que c'est au sommet. Ici. Est-ce que c'est ? La page à la couleur de la police va certainement être blanche. Espacement entre les lettres, c'est-à-dire l'espace entre chaque style de calque. Nous allons donc l'avoir pour enfoncer le bas de la marge. Faisons en sorte qu'il soit 20 pixels. Enregistrez-le et exécutez-le. Ici, nous devons styliser pour la chute arrière, le dos, tiret pour la largeur maximale, 380 pixels. La marge, 0 automatique. Maintenant, je vais juste les copier. Fermez le support bouclé et nous voulons cibler le tableau de bord IMG. Mais bien sûr, vous devriez connaître tous ces cours ici. Vous devez savoir que c'est la mousse, l'IMG arrière où se trouve la haie et l'image. Donnez-lui une largeur de 100 %. Marge inférieure de 20 pixels. Nous devons donc maintenant styliser l'IMD en arrière quatre. Pour cela, je n'ai qu'à les copier. Collez, fermez le support bouclé. Ensuite, je vais faire H4, c' est-à-dire les téléphones. Laissez-moi vous montrer. C'est l'IMG qui a frappé quatre façons, regardez-le. Il s'affiche maintenant à l'écran simplement parce qu' une police elle-même est noire. Voici donc ça. Envoyez votre e-mail ici. Tout d'abord, nous devons changer la couleur pour pouvoir la voir ici à l'écran. Faisons en sorte que ça économise largement. Voyez-vous maintenant qu'il est très visible. Espacement ultérieur. Point zéro. Une forme pour le blé. Nous voulons qu'elle soit un peu lourde, comme si elle semble corporelle ici. Nous allons donc en faire 400, économiser, revenir en arrière. Pouvez-vous voir maintenant qu'il s'agit d'un tableau plus important maintenant. Donc, si vous les enlevez maintenant, pouvez-vous voir la différence ? La différence est l'argile. Donnez-lui une taille de téléphone de 18 pixels. Maintenant, nous voulons cacher la scène un peu en arrière-plan. Donnez la capacité de 0,5. Économisez. Voyez-vous maintenant ? Nous avons donc ce genre d'effet ici, non ? Superbe. Bon, revenez au navigateur. Et ici, l'image qui est cette IMG ici est trop grande, il faut donc réduire la taille. Voici donc l'image. Je vais coller puis fermer le support bouclé. Nous devons maintenant cibler l'émetteur son bras, qui est la balise IMG. Donc, la largeur, rendons la sécurité à 100%. Maintenant, voyez-vous qu'il prend forme progressivement. Et moins que ce que nous allons faire, c'est cacher un peu l'image en arrière-plan. Donc, ici, je vais faire de l'opacité. Un McKee moins, 0,5. Gagnez encore un temps. Voyez-vous maintenant que Emit est Heider en arrière-plan ? Passons maintenant aux champs. Téléphone central. Le téléphone, c'est résolu. On nous dit donc que nous allons avoir un présentoir. Flex, la couleur. Faisons le noir. 15 pixels. Justifiez le centre de contenu. Et ils vont fléchir la direction. Colonne. Maintenant pour la marge supérieure moins 52 pixels. La couleur d'arrière-plan blanche et le rayon de bordure. 12 pixels. Économisez. Sortons ça. C'est vrai ? Les choses prennent forme progressivement et j'aime ça. Très bien, continuons. Retournez au code VS. Maintenant, nous devons styliser un tag p directement dans le téléphone. Laissez-moi vous montrer. Voici la balise p. Et ne vous inquiétez pas, lorsque nous commencerons à implémenter les fonctionnalités de messagerie électronique, je vais vous montrer quelles sont ces portes, accord, alors ne vous inquiétez pas pour l'instant. Qu'est-ce qu'un téléphone et un tag p ? Alignement du texte, centre, marge, bas, dix pixels. Et la couleur, qui est la couleur de police. À moins que mes enfants, orange. Le point zéro de l'espacement des lettres pour la pluie. Vous voulez vraiment que les fonctionnalités soient des ensembles, n'est-ce pas ? Ainsi, lorsque vous cliquez sur le bas, vous verrez un test sur le téléphone pour indiquer si le message a réussi ou non. C'est exactement ce que l'interdiction des portes, qui est cette étiquette de police, Hey, la famille de polices. Coquelicots audacieux, non ? Donc, pour l'étiquette du formulaire, la marge inférieure sera de cinq pixels. La couleur, nous allons le rendre noir. Ensuite, l'espacement entre le point zéro et la RAM. Économisez. Revenez ici. Maintenant, vous voyez les étiquettes vr bien placées. Ce sont les étiquettes. Très bien, commençons donc à styliser les champs de saisie, savoir le nom, les champs de nom, le champ e-mail et le champ de message. Maintenant, vous devez savoir que dans l'entreprise et l'entreprise, nous devons cibler le coma d'entrée et cette zone d'essai. Nous allons aller avec une largeur de 100 %. La bordure, deux pixels, solide, RGBA. Maintenant, nous avons 0, k. Il suffit de faire ça en quatre fois. Et le contour, faisons connaître la couleur d'arrière-plan. Donc, avant de procéder, je dois vous montrer ce que nous voulons faire, c'est venir ici, vous imiter jusqu'au projet de démonstration. Et comme vous pouvez le constater , la couleur par défaut des entrées est une sorte de gris. Permettez-moi de zoomer un peu. Voyez une couleur grise ici. Et lorsque vous concentrez votre souris dessus, elle devient blanche. On peut le voir avec une sorte de bordure bleue. Oui. Bordure bleue. Oui. Je suis donc maintenant obligé de définir la couleur par défaut des imputes pour qu'elle soit grise. La couleur va donc être RGBA à 300, Kolyma à 30 Zara. Zara. Ensuite, on va avoir hé, coin, 0,6, économiser, revenir en arrière. Et pourquoi est-ce que c'est ? Savez-vous comment écrire le rembourrage ? La taille de la police ? M ? Pour le bas de la marge. Faisons 22 pixels. Rayon de bordure. Nous voulons qu'il soit un peu courbé. Je vais faire 10 pixels. Point de transition. Ou le secret est sûr et beau. Tout est beau, mais nous avons encore certaines choses à régler. Continuons maintenant. Pour la zone de test, pour cette zone, 3000 coins à cinq virgules deux, virgule 0, 570, enregistrer. Et enfin, le fond lui-même. Quelle est la couleur de fond doit être blanche. Économisez. Retournez en arrière. Permettez-moi de zoomer un peu plus haut. Donc, lorsque vous concentrez votre souris sur la boîte de message, je vois. voyez-vous ? Les gars parfaits. Mais pour l'instant, cela ne fonctionne pas pour l'e-mail et un champ de nom, mais vous pouvez l'avoir et le message qui est la zone de test, mettre en surbrillance ces doublons, Maj et Alt, puis fracasser la flèche vers le bas de votre clavier. Très bien, donc maintenant ils seront changés pour imputer. Je pense qu'il va avoir les mêmes styles. Save, revenez, Hey, voyez-vous ? Très bien, il faut donc styliser la marge inférieure, les 15 pixels supérieurs. Rembourrage, cinq pixels. Contour. Les 160 pixels. Économisez. Ça a l'air bien. La frontière. Donnons une bordure de deux pixels, solide. Orange. Taille de police, 12 pixels, rayon de bordure, 19 pixels. Couleur de fond. Très bien, faisons en sorte que ça soit sûr. Très bien, la police n'apparaît pas. Nous devons lui donner une couleur de police. La couleur doit donc être blanche. Sauvez, revenez. Très bien, et la police elle-même est trop petite d'une taille de police, donc faisons peut-être 18 pixels. Ok, c'est très bien. Oui, c'est très bien. Alignez les éléments au centre, puis justifiez le contenu au Père Noël. Bon, c'est beau. Mais pour l'instant, l'entreprise n'est pas comme nous le voulons. Et vous voyez, c'est exactement ce que nous allons réaliser. Nous allons donc travailler pour y parvenir. Mais avant cela, nous devons rendre le impie pour le boulonnage, donner la couleur de fond de même ici. Plus doux. Transition. L'un est, qui est un, disons Aquin, et la bordure, deux pixels. Alors, le symptôme principal, Hé, viens ici et essayons. Vous me voyez zoomer ? C'est très bien. Pour la charge inférieure. Ce qui est bon pour l'instant. Je ne pense pas que nous ayons à styliser cela simplement parce que nous ne l'avons pas vraiment fait dans le contact que G est donc à l'avenir, nous allons le faire. L'IMG Buck, Buck, Flex. Faisons-en un. Alignez les éléments au centre. La marge, n'est-ce pas ? Smith chauffe 20 pixels. Enlevez ça. Cela devrait être aligné pour envoyer, sauvegarder. Et pour le téléphone. Donc 0,9. Essayons donc de corriger les icônes avant de pouvoir aligner ce dossier. Je vais donc faire le point sur l'étiquette I directement dans le charbon. Nous allons faire un pod en sept pixels. La couleur, plus important encore, est large. Économisez. Maintenant, vous pouvez voir les icônes, n'est-ce pas ? Très visible. Ok, donc on veut faire ça comme ça. Voyez-vous que lorsque vous passez le curseur dessus, cela montre cet effet cool. Maintenant, je n'ai plus qu'à les copier. Collez-le ici. Fermez les crochets bouclés ici. Nous allons y aller plus loin. Et nous allons le transformer et lui donner une échelle de 1,5. Sauvez, revenez en arrière. Maintenant voyez-vous beau comment k, donc nous devons résoudre ce problème simplement parce qu'une entreprise n'est pas bien alignée. Et c'est exactement le résultat final de ce que nous voulons réaliser ici. 40. Correction de ma forme de contact (stylisation): Nous voulons donc qu'il ressemble à ceci sur une plateforme mobile, mais nous le voulons sur un ordinateur portable ou une tablette. Nous devons donc régler cela rapidement. Je vais faire des publicités, l'écran et de la largeur min-of , puis nous aurons l'aboiement de la largeur maximale. Faisons en sorte qu'il affiche Flex. Justifiez le contenu, l'espace entre la marge, les 30 pixels supérieurs. Économisez, revenez en arrière et voyons ça. Et vous voyez ça magnifique. C'est soudainement le résultat que nous attendons de cette conférence. Retournez au code VS, sauf si vous continuez. Nous devons styliser le point IMDB, tiret. Et ici, nous allons le faire fléchir. Alignez-le au centre. Et le module n'est-ce pas ? 20 pixels pour le formulaire lui-même. Flex 0,9. Je pense. Vaso pour l'instant. Économisez. Très bien, pouvez-vous le voir ? Il est extrêmement beau et j'aime ça. Alors, sortons ça sur la plateforme mobile. C'est vrai ? C'est donc exactement ce que nous avons si j' entends qu'il est effectivement réactif sur toutes les plateformes. Sortons ça sur le Galaxy S5 et l'iPhone 5. iPhone et iPhone 6. Sortons ça sur iPhone 678. Vous voyez, tout semble bien. Sortons ça sur iPad Pro, sur tablette. C'est donc exactement à quoi cela ressemble sur une tablette. Ainsi, par exemple, un URI est proposé, et lors de la prochaine conférence , nous allons passer au back-end. Pour l'instant, c'est exactement ce que nous avons ici. Ça a l'air tellement beau et j'aime ça. Tout fonctionne comme prévu. Voyez-vous que c'est la fin de cette conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 41. Fonctionnalité de forme: Maintenant, nous avons la forme extrêmement belle. Nous devons finaliser la fonctionnalité frontale. Au fait, je veux vous montrer quelque chose. Très bien, alors maintenant, lorsque je clique sur la Seine pour avorter, vous réaliserez que l'application va se recharger. Laissez-moi vous montrer rapidement. Voici le même tableau maintenant que je clique. Jetez un coup d'œil. L'application va se charger. Vous allez donc voir cet effet juste sous l'onglet, cochez l'autre onglet ici. Essayons à nouveau. Lorsque je clique sur le bouton d'envoi, il suffit de prévoir ici juste sur l'onglet. Voyez-vous l'application avec des charges ? C'est donc l'un des réchauds sur lesquels nous allons la fixer au code VS. Faites défiler vers le haut et résolvons ce problème. C'est vrai ? Nous allons donc définir ici un dossier de soumission constante de fonction. Et ici, nous allons choisir un événement, le définir à notre fonction. Maintenant, je vais faire un point d'événement, prévenir, par défaut, vissé sur le formulaire moins d'invoquer cette fonction. Le voici. Maintenant, je vais soumettre, envoyer un formulaire, enregistrer, aller sur le navigateur et jetons un coup d'œil. Rechargez le défilement moins fluide jusqu'au composant Contactez-moi. Essayez-le en cliquant sur le même bateau à DC. Maintenant, l'application ne recharge pas l'animal Parfit, Harold à VS sans fondement a continué. Faites défiler jusqu'en haut. Ici, nous allons créer un objet appelé données, le définir sur objet vide. Ensuite, nous allons saisir le champ de force, qui est le nom séparé par l'e-mail le plus calme, séparé par une virgule. Enfin, le message. Très bien, nous allons voir ça. Maintenant, je vais faire console.log. Consignons les données, enregistrez-les sur le navigateur, rechargez-les. Maintenant, je dois vous emmener à la console pour le nom. Je vais faire Mike pour l'e-mail, je vais le faire sur gmail.com. Et pour le message, je vais juste attraper le VIH. J'ai entendu dire que lorsque je clique sur le bouton Envoyer, vous verrez l'objet sur la console. Vous voyez. Laissez-moi l'ouvrir. On y va. Je m'appelle Mike pour le courrier électronique sur gmail.com, puis le message est élevé. Tout fonctionne comme prévu sur le continuum VS Columbus. Donc je dois juste enlever ce journal y paire de ces métro et d'erreur. Nous devons donc l'enrouler dans un bloc d'essai. Essayez. Ensuite, vous devez également sélectionner celui avec le bloc de capture. Ok, donc pour la prise ici, nous n'aurons qu'à enregistrer toutes les erreurs que nous avons sur l'émission. Et ici, il suffit de surligner des lignes 44 à 48. Venez ici dans le bloc d'essai, collez. Donc nid, nous devons définir le booléen sur true. Réglez sur vrai. Au fur et à mesure que nous allons plus loin, je vous expliquerai quelles sont les portes booléennes ici. Pour l'instant, nous allons avoir un repos constant. Axes, point post, mais tick slash données de contact, qui est cet objet ici. Nous l'amenons ici pour tout prendre dans les champs, n'est-ce pas ? C'est donc aussi simple que ça. Et nous avons un avertissement sur la console. Il est dit que Zeus n'est pas défini. Il faut donc installer Axis, revenir au terminal, puis sur C pour arrêter le serveur. Maintenant, je vais faire npm install acts use et nous devons également installer bien que réagir pour justifier. Laissez-moi vous montrer rapidement. Passons au projet de démonstration. Bon, je dois juste recharger. Maintenant, lorsque je clique sur le bouton Envoyer, le toast s'affiche dans le coin supérieur droit de l'écran indiquant le message d'erreur ou le message sexuel SOC. Cliquez sur. Dsi dit, veuillez remplir les champs. Voici donc le message de toast, et c'est la bannière. Je n'ai pas eu à coder VS et à écrire dans le terminal. Nous devons également installer React, dash, justifier, installer correctement, installer correctement, faire défiler vers le haut et moins importé. Très bien, hé, je vais importer depuis. Et nous devons également importer des toasts de, React, témoigner. Faites défiler vers le bas Et ici, nous devons continuer. Ceux-ci rendraient définitivement une promesse. Nous devons donc attendre. Ce programme est ici. Il va falloir attendre. Donc, chaque fois que vous avez affaire à l'attente, vous devez terminer la fonction avec une même fissure. Je vais donc faire un saint. Très bien, veillez donc à ne pas importer la même chose depuis notre USGS. OK. Faites défiler jusqu'en haut et regardons ça. C'est vrai. Continuons. Nous devons donc vérifier si les champs sont vides. Si la longueur du point de nom est égale à 0. Donc ici, cela impliquera certainement une répétition, qui est après copier, coller, changer le nom en longueur de point de l'e-mail. Et modifiez également la longueur de ces deux points de message. Très bien, donc si c'est vide, nous allons dessiner un message depuis le back-end. Ici, nous allons faire des données de points de repos, des points MSG, qui est le message. Nous voulons également utiliser le toast pour afficher le message dans le coin supérieur droit de l'écran. Maintenant, je vais faire ces erreurs de point. Ici, c'est exactement la même chose. Je n'ai qu'à copier. Coller. Ensuite, nous devons définir le booléen pour forcer un autre. Si le formulaire est rempli et que tout est correct, nous devons renvoyer le message de réussite depuis le back-end. Donc, nous allons faire autre chose si le statut restauré est 200. Je vais donc tout copier d'ici comme ça, des étages 49 à 51. Copier. Collez ses bons gars, il y a une faute de frappe ici. C'est censé être une erreur. Je ne sais pas pourquoi mon clavier fait toujours ces doubles. Ici, nous devons changer la flèche de toast en chaussette toast dot dit : « Parfait ». Très bien, en sécurité. Faites défiler vers le bas et mettons en œuvre le chargement Bob. Voici donc le Bertin. Le nom de classe de cette div est st. Assurez-vous donc que ce que vous voyez à l'écran est exactement ce que vous avez à votre extrémité sur votre code VS. Donc, juste après la fermeture d'une étiquette, nous aurons un crochet bouclé. Et si le booléen est vrai, nous allons afficher la barre de chargement. Il suffit donc de l'enrouler dans une balise b, lui donner un nom de classe de chargement. Sur cette balise B, nous allons avoir les sons IMG. Vous voyez, chargez-en un. Compte tenu d'un étrange avec les flèches de l'étiquette à fermeture automatique. S'il est faux, il ne s'affichera pas sur l'avortement. Donc, juste une chaîne vide. Permettez-moi de vous montrer cette image rapidement à nouveau. Faites défiler jusqu'en haut. Hé, c'est ça ? Nous venons donc d'importer les charges GIF à deux points, puis de le stocker. Donc, quand je fais le commandement P, t2. Voici donc la barre de chargement. Faites défiler vers le bas jusqu'au npm du terminal. Commencez. Voyons le résultat final. Faites défiler vers le bas, puis cliquez sur le même tableau. Quand voyez-vous beau, j'aime ça. Cela pourrait donc ne pas fonctionner de votre côté simplement parce que vous ne l'avez pas stylisé. Allez vers le féroce qui ne pouvait pas. Laissez-moi vous montrer rapidement. Maintenant, nous allons nous ouvrir, me contacter. Faites défiler vers le bas où nous avons la charge. OK ? Il vous suffit donc de styliser cette classe ici, qui est la charge. Laissez-moi vous montrer. Hé, est-ce que tout ce que vous avez à faire est de lui donner une largeur de 60 pixels. Et ensuite, vous allez l'avoir comme ça. Et lorsque vous cliquez sur le même port en rechargement. Maintenant, le booléen définit la force. Lorsque je clique à nouveau sur le bouton Envoyer, le booléen est réglé sur true et l'arc de chargement s' affiche sur un tableau alors que c'est tout pour l'instant pour cette phrase de conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 42. Appel à l'animation à l'action et à FadeInScreen: Dans cette conférence, nous mettrons en œuvre l'appel à l'action Wharton et la moitié de l'effet de décoloration. Heureusement, très bien. Pour l'instant. Lorsque vous frappez la haute armée en avortant, rien ne se passe. Vous voyez ? Et si j'entends ça, rien ne se passe. Lorsque vous rechargez le site Web, l'effet de décoloration ne fonctionne pas parfaitement. donc rapidement eu le code VS à moins de continuer. Très bien, nous allons donc commencer par le composant À propos de moi. Il y a une erreur typographique ici. C'est censé s'évanouir l'écran. Je vais m'assurer que vous apportez les corrections nécessaires. Et c'est la bonne chose. Après cela, nous devons revenir à cette div avec le nom de classe du conteneur à propos de moi. Et puis je vais faire de la décoloration, Dash. Enregistrez-la sur le navigateur. Et voyons si l'effet de décoloration est appliqué au composant À propos de moi. Rechargez. Vous voyez ? Maintenant, jetez un coup d'œil. voyez-vous ? Faisons donc la même chose à tous les composants. Vous devez donc ouvrir CV js. Et puis je pense que nous avons également commis l'erreur ici. En fait, nous avons commis cette erreur autour de l'entreprise simplement parce qu'elle a été copiée à partir du composant À propos de moi. Assurez-vous donc de les modifier pour qu'ils s'intègrent à l'écran, puis faites défiler vers le bas. Juste ici. Dit div avec le nom de classe du conteneur d'origine. Ensuite, je vais faire de la décoloration, du tiret, de la sécurité. Elle aussi sur le témoignage GS. Les gars, il suffit de faire ça. D'accord. On va s'adapter à l'écran, juste dans le témoignage. Oh mon Dieu. C'est un top. D'accord. Nous allons donc l'implémenter sur la balise de section. Économisez. Et enfin, contactez-moi. Et bien sûr, nous devrions faire la même douleur, c'est que LI la sauvegarde sur le navigateur et ensuite la recharger. Maintenant, lorsque je fais défiler vers le bas, le composant va s'estomper. Doc, DOC. Parfait. Il est maintenant temps de mettre en œuvre le vote de l'appel à l'action. Je n'avais pas vraiment pu aider. Donc, ici, nous allons copier la copie onclick. En fait, c'est tellement simple et je crois que certains d'entre vous peuvent le faire à votre fin même en regardant cette conférence. Alors maintenant, nous devons passer au profil J. Démerdez, d'accord, ici où nous avons le haut AMI Bertin. Maintenant, placez votre souris ici, puis collez la propre clique. Voici donc la méthode OnClick. Cette croix F est un gestionnaire de défilement de points AMI haut scrotal. Accédez au service Scroll. Et c'est la fonction de faire défiler, de m'embaucher. Économisez. Retournez en arrière. Maintenant, donnez-lui un clic. Il fonctionne parfaitement bien. Dans le coin inférieur droit de l'écran se trouve l' action du CTO qui vote pour faire défiler en douceur jusqu'au composant d'accueil. Et je vais laisser cela comme une tâche pour que vous l'implémentiez vous-même. Mais je peux vous assurer que le code source complet est juste là sur GitHub. Alors faites défiler vers le bas, euh, laissez-moi vous montrer ici. Vous devez faire exactement la même douleur que celle que j'ai faite ici. D'accord. Il suffit de copier la méthode OnClick puis de la coller, à droite. Laissez-moi le faire pour vous. Je ne veux pas que vous vous plaigniez. Nous allons donc nous diriger vers notre « À propos de moi ». Placez votre souris ici, puis collez, enregistrez. Retournez en arrière. Cliquez ici. Tout fonctionne comme prévu et j'aime ça. C'est souvent le moment de cette conférence et on se voit dans la prochaine conférence. Prenez soin de vous. 43. Initialisation de backend: Très bien, alors plongeons à l'arrière, fin. Elle est sur le code VS. La première chose que nous allons faire ici est d'initialiser le fichier package.json Command B pour faire apparaître l'explorateur. Et puis je vais simplement cliquer sur le répertoire client. Et voici le répertoire racine. Voici donc où nous allons initialiser le fichier package.json pour le dos, la fin, elle sur le terminal, puis faire la commande C pour arrêter ce serveur en cours d'exécution. Et puis nous devons cd espace point point pour sortir du répertoire du client. Pouvez-vous voir maintenant que nous sommes dans le portefeuille de répertoires racine Pro. Ce que je vais faire ici, c'est initialisation du gestionnaire de paquets de nœuds, ce qui est nécessaire pour MPM. Et bien sûr, vous devez accepter toutes les conditions. Nous allons donc dire oui, oui. Continuez à appuyer sur la touche Entrée. Et oui. Maintenant, je veux regarder l'explorateur. Vous allez le voir dans le fichier JSON point de paquet . Et voilà. Doc. Magnifique, toujours sur le terminal. Nous devons maintenant installer les paquets nécessaires qui seront utilisés au backend. Nous allons donc installer NPM en même temps. Nous devons également installer des halls et nous inquiéter après l'installation. Je vais tout vous expliquer. Et bien sûr, nous avons besoin du point ENV. Nous avons également besoin d'experts. Chargez-moi la loi. Et enfin, nous avons besoin d'un moniteur de charge, qui est pour le nœud. Je vais donc juste mettre la vidéo en pause pour que vous puissiez y jeter un coup d'œil. Car l'installation est en cours et à la fin, vous allez l'avoir directement dans le fichier package.json pour le backend. Très bien, pouvez-vous voir ici que c'est parfait. Commençons maintenant par simultanément. Il s'agit simultanément d'un package qui peut exécuter plusieurs scripts MPM simultanément. Et pour les voitures. Dans un Tim très simple, la cause est un mécanisme ou qui permet de contrôler l'accès à des ressources situées en dehors du domaine donné, n'est-ce pas ? Donc, définitivement, la cause serait utilisée pour ajouter des intergiciels à l'application. Nest est donc le point ENV. Dot ENV vous permet de séparer les secrets de votre code source. Très bien, prenez par exemple que vous obtenez un site Web de commerce électronique et vous voulez partager du code source ou avec vos amis comme dans un domaine public, chansons comme GitHub, non ? Et vous voulez simplement voir un code source avec eux, mais vous ne voulez pas partager votre clé API pour l'intégration des paiements et peut-être le mot de passe dans la base de données. suffit donc de masquer tous les secrets du fichier ENV , puis d'ignorer le fichier ENV. Et quand vous souhaitez déployer l'application sur GitHub. La ligne imbriquée est donc les rayons X. En fait, Express est un module Node.js qui permet un routage facile, n'est-ce pas ? Et nous avons désigné MLA lui-même avec une compote de pommes pour envoyer un message directement dans la boîte e-mail. Et enfin, le noeud est l'ammoniac haut, qui est le noeud connu. Donc ce que les portes normandes sont de regarder l'application chaque fois qu'il y a des changements sur l'application, cela va aider à redémarrer l'application de façon spectaculaire. Donc, juste ici sur le paquet .json, merdez. Nous allons donc mettre en place les scripts. Très bien, donc s'il vous plaît une virgule ici, je pense que c'est le problème. Et nous allons nous inquiéter. Je vais tout vous expliquer. Il suffit donc de taper le code très rapidement. Mpm, démarrage, préfixe. Client. N'oubliez pas d' ajouter un coma pour ne pas vous plonger dans les ennuis. La moitié de la profondeur. Concurremment. Barre oblique inverse. Npm, exécutez côté serveur des guillemets doubles et une autre barre oblique inverse vient ici. Une autre barre oblique inverse, MPM, exécute la barre oblique inverse de Clyde, guillemets doubles. Et le nid est de donner accès à un héros appelé Calculer notre application pour le déploiement. Maintenant, je vais juste faire la commande B pour avoir une pension complète. Heroku. Ne vous inquiétez pas, je vais vous montrer que nous avons dû copier et coller ce code pour ne pas vous enfermer dans les ennuis également. La production de soulignement BWT MPM était-elle soulignée. Faux ? Ensuite, je vais installer le client de préfixe npm , MPM exécuté. C'est vrai ? Je ne connais donc pas le dossier des matériaux. Matériaux. Ouvrez le code Hale-Bopp. Je vais donc faire défiler vers le bas. Très bien, voici donc le script back-end. Il faut qu'il copie comme ça. Viens ici, essuyez-le, collez. C'est donc exactement ce que vous devez faire. Diverses unités doivent être très prudentes ici parce que quand tu commettes une erreur, honnêtement, ça va te faire, je ne veux pas dire ça. Enregistrez ce projet. En fait, ce que je vais expliquer plaidoyer, c'est le que la div, n'est-ce pas ? Lorsque nous exécutons npm dev, cela aidera à arrêter le front end et le backend. Très bien les gars, donc c'est souvent maintenant pour cette conférence. Lors de la prochaine conférence, nous créerons l'épargnant. Prends soin de toi. 44. créer le serveur: Commençons par créer une commande de sauvegarde B pour faire apparaître l'explorateur. Nous allons donc créer ici le module serveur dans le répertoire racine. Mais je vais faire passer ma souris sur ce fichier ici, cette icône, j'espère que vous pourrez voir. Il suffit donc de planer le curseur sur ce fichier, qui est que la nouvelle agriculture peut voir. Cliquez dessus, puis nous allons le nommer server.js. Un autre survole sur cette icône, qui est le nouveau fichier. Cliquez dessus, puis nous allons avoir point ENV. Parfait. Il ne reste plus qu'à garder le secret d'un fichier env ici dans le dossier Materials. Voici donc les deux principaux secrets que nous voulons cacher dans ce cours. Je dois juste appeler B, revenir à VS, bien, collé ici, la sauvegarder sur le server.js. Nous allons maintenant exiger que nos paquets soient exécutés sur notre serveur en utilisant Express JS, nécessitent dot ENV, dot config. Et ici, il se trouve que nous avons une constante, appelez cela expresse besoin. Nous voulons avoir besoin de radiographies. Cela signifie donc simplement que nous importons des expressions à partir du module express. Permettez-moi de vous montrer ce que nous avons fait en ce moment. À partir de là, nous demandons simplement que l'expression du module extras, puis le stocker dans ces constantes ici. Les données les plus simples. Et nous devons également faire de même pour la cause. Excusez-moi, ce doit être des constantes qui exigent que nous ayons besoin de la cause. Je vais donc faire des radiographies. Permettez-moi donc de vous expliquer dans un GFP, ils appelleront la fonction express et placeront une nouvelle application à l'intérieur de cette variable. Comprenez-vous ce que je veux dire ? Il s'agit donc d'appeler une nouvelle fonction express, puis placer une nouvelle application express à l'intérieur de cette variable. Nous devons maintenant dire à l'application d'utiliser les appels comme intergiciel. Jusqu'à DOT, utilisez les appels Express , dot, JSON, app.use. Donc, je vais tout simplement faire ici, en créant l'intergiciel. Créons maintenant les ports. Traiter les points ENV, diagramme de points. Nous devons utiliser le port 5000. Et je vais faire de la location de points, nous devons écouter un port moins de console, enregistrer le pot que nous écoutons. Je vais dire serveur, écouter le port 5000, économiser. Donc, juste sur le terminal, je vais faire le service NPM Run. Duc. Les gars de profit disent que plusieurs écoutent le port 5000 et le nœud lit parfaitement bien. Tout est cool, les gars. Laissez-moi vous montrer quelles sont les portes d'un Lui. Supposons maintenant que je veux en faire plusieurs en écoutant uniquement le port 5000. Je vais donc économiser. Lorsque j'enregistre, lorsque vous vérifiez sur la console, vous réaliserez qu'il s'agit de redémarrer en raison de modifications, puis de démarrer le nœud server.js. La maman NADH aide donc à redémarrer l'application chaque fois que vous apportez des modifications à votre code source. Cela implique donc que vous n'avez plus besoin de venir ici et d'exécuter le serveur npm. C'est tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. Prends soin de toi. 45. ContactRoute: Après avoir créé le serveur lors de la conférence précédente , passons rapidement à la route des contacts. Ici, sur VS Code. Tout ce que je vais faire maintenant, c'est de naviguer vers l'explorateur. Par conséquent, ici, je dois juste fermer le client. Très bien, maintenant, nous sommes ici dans le répertoire racine. Ainsi, directement dans le répertoire racine, nous allons créer un paquet appelé route. Cliquez ici, où ma souris se trouve dans un nouveau dossier. Nous allons nommer cette route de dossier. Dans ce dossier, nous allons créer le module d'itinéraire. Cliquez avec le bouton droit sur les itinéraires. Voici un nouveau fichier, dot js. Donc, ici, je vais avoir besoin d'un routeur Express. Et le nid est le noeud Mailer. Constante. Chargez-moi la loi. avez besoin de NADH moi Le Havre, non ? Donc, pour implémenter le nœud Mailer, trois étapes sont impliquées. La première étape est que nous devons créer qui transporte nos objets. Deuxième étape, nous devons définir l'objet des options de publipostage. Et la troisième étape, nous devons livrer le message avec la méthode d'envoi de courrier. Donc, avant de procéder à ces marches d'armes, il suffit de créer l'itinéraire. Maintenant, je vais faire des points de routeur, un seul contact oblique. Et ici, nous devons prendre en charge la technique de demande et de réponse pyramidalis car n'échangez pas les paramètres, ok, donc lorsque vous répondez ici et demandez ici, ok, donc lorsque vous répondez ici et demandez ici, vous ne l'avez peut-être pas pour vous. Réglez-le sur la fonction flèche, Commande B pour avoir une carte complète. Nous devons donc récupérer les données du formulaire, qui provient du corps. Nous allons maintenant avoir un corps de point de demande de données variables car nous faisons une demande de la firme que nous avons créée précédemment lors des conférences précédentes. Si les flux sont MTU, nous voulons renvoyer un message au client. Et je pense que nous l'avons mis en œuvre. Et le contact J est si courant P, contactez-moi. C'est donc exactement la même chose que nous allons faire. Quels sont les quelques changements. Copiez les lignes 51, puis revenez en arrière pour effectuer l'itinéraire, collez. Fermez le support bouclé. Donc, ici, ce sera le nom du point de données, longueur du point, qui sont ces données ici. Données variables. C'est la même chose qui s'applique à l'ensemble d'entre eux. Point de données, longueur des points, puis longueur du point du message data.dat. Superbe. Donc, s'ils sont égaux à 0, ce qui signifie que si rien n'est dans les champs et que vous cliquez sur Saint Boating, nous devons renvoyer la réponse point JSON. pris un objet vide, et je vais faire MSG pour le message. Donc, nous allons faire ici, s'il vous plaît sentez que les champs sont-ils magnifiques ? Passons donc à la première étape. Quelqu'un peut-il me rappeler, qu'est-ce que la première étape ? Haha, c'est vrai, ne vous inquiétez pas, je vais vous aider. La première étape consiste à créer ce transporteur ou cet objet. Laissez le transporteur SMTP, chargez-moi le point créer un transporteur. Maintenant, nous allons lui prendre un objet vide. Juste ici. Nous allons avoir le service et ce sera Gmail. Et s'il vous plaît, vous devez placer une virgule ici. Les ports de connexion. Faisons pour 65 virgules. Et maintenant, nous devons implémenter l'authentification. L'utilisateur. Vous devez maintenant inclure votre e-mail. Tétanos. C'est mon e-mail personnel. Assurez-vous donc de corriger dans votre e-mail, à droite, dans le guillemets unique, une virgule. Et ici, vous devez également corriger votre mot de passe. Disons donc que mon mot de passe est ABC à 23. Assurez-vous donc que l'e-mail et le mot de passe sont corrects. Si vous ne l'avez pas correctement, il se peut que cela ne fonctionne pas pour vous. Semestre en ligne consiste à définir les moyens de l'option de messagerie. Réglez-le à nouveau sur un objet vide. Donc, ici, nous allons avoir à partir de outil de messagerie de points de données de colonne. s'agit donc de l'e-mail de votre client, comme s'il venait de l'e-mail de votre client vers votre propre e-mail personnel, qui est l'e-mail de l'administrateur. Je n'ai donc qu'à les copier. Collez le message de coche du sujet du signe dollar ici, ouvrez et fermez le crochet bouclé, puis le nom du point de données, virgule, le HTML, la coche arrière. Très bien, donc ici, vous ne devriez pas être confus. Cette coche arrière s'ouvre ici et elle se termine ici. Je veux simplement les faire pour plus de clarté afin que tout le monde puisse suivre. Maintenant, nous allons avoir h3. Fermez cette histoire d'un ici. Informations. En dehors de l'histoire. Nous allons avoir une étiquette UL. Et ici, nous allons avoir une étiquette LI. Maintenant, nous allons avoir le principal provenant des données, le nom du point, le surligner, le dupliquer. Et nous allons avoir l'e-mail, l'e-mail Data Dot dès maintenant. Enfin, nous allons l'avoir pour un message. Mais pour cela, nous devons sortir du tag UL et des techniques. Nous sommes toujours dans le HTML ici. Nous allons avoir un h3. Donc, en gros, ce que nous faisons, c'est que nous concevons la mise en page pour laquelle le message supposera correctement, dans votre boîte de réception, n'est-ce pas ? Nous sommes donc en train de créer la mise en page du message. C'est aussi simple que ça. Message. H3, possédez une balise p , puis fermez la balise p. Juste entre l'étiquette. Nous allons avoir un signe dollar, ouvrir et fermer les crochets bouclés data.me, non ? C'est donc tout pour les options de publipostage. Donc, juste après cela, nos objets de mailing, nous devons envoyer le message avec la même méthode de messagerie. Donc tout ce que je vais faire ici, c'est que le transporteur SMTP envoie du courrier, pris les options de repas, puis le régler sur notre fonction. Ils peuvent donc parfois générer une erreur. Nous devons donc l'enrouler dans un bloc d'essai. Ici, nous devrions également prendre en compte l'erreur. D'accord ? Bien, et un bloc de carte, nous allons renvoyer un point de réponse. Donc, si le fichier response.status est un JSON de 500 points de base, nous allons transmettre le message. Ici. Nous allons faire un message. Erreur du serveur IIS. Et aussi ici, dans le bloc d'essai. Encore une fois. Si response.status est 400, nous allons le faire. Ressentez et entendez la réponse. Le statut des points est 200. Il s'agit donc d'un succès, ce qui est le message. Merci pour la beauté, n'est-ce pas ? Alors, que faut-il exporter ce module ? Exportations de points de module, routeur. Superbe. Très bien, donc avant de terminer cette conférence, nous devons faire une chose ici. Pouvez-vous voir ce support de colonie ? C'est ici. Ce n'est donc pas censé être le cas. Donc, tout ce que nous allons faire maintenant, c'est culminant de foiré. Ici, c'est ça ? Il devrait donc s'arrêter ici. Commande V pour coller. Pouvez-vous voir, vous savez, tout est cool. Rapidement, passons aux mêmes idées et importons ce module. Allons le faire ici. C'est vrai ? C'est donc tout pour l'instant, pour cette conférence. voit lors de la prochaine conférence. 46. Configurer Gmail: Configurons l'application dans la moitié de l'e-mail, la travaillant sur server.js. Juste ici. Nous devons chauffer la route. Maintenant. Je vais faire des points, utiliser le karma. Itinéraire de contact. Vous réformez en toute sécurité. Ouvrez maintenant le fichier package.json directement dans le répertoire client du frontal. Je vais donc faire Command P package.json. Et puis voilà, ce type, juste ici au front end, qui est le répertoire client. J'ai fait cette héroïne. Faites défiler vers le bas Voici le proxy, surlignez. Copiez l'héroïne dans le code VS, puis collez-la ici. Économisez. Très bien, donc si votre application n'est pas déjà en cours d'exécution, je vais maintenant faire le contrôle C pour arrêter le serveur. Je dois donc tout recommencer pour que tout le monde puisse suivre. Maintenant, je vais faire NPM Run Dev. Bien sûr, vous devez savoir que cela va démarrer le front end et Oswald le backend. Essayons en cliquant sur le même document acheté dans DOC qui dit, s'il vous plaît sentez que ce sont les champs. Laissez-moi vous montrer rapidement ici dans VS Code, puis contactez-moi EGS. est donc là que nous avions la maladie. Le voici. Par conséquent, si les champs sont vides, nous devons recevoir ce message du backend et l'afficher sur le front end. Laissez-moi vous montrer au fond où nous lançons ce message. Ouvrez la route des contacts. Et pourquoi est-ce que c'est ? Le front end reçoit donc ce message ici. Alors maintenant, lorsque nous le faisons sur n'importe quel succès, nous allons saisir ce message et le montrer également au front end. Maintenant, l'héroïne dans le navigateur à moins de récupérer le courrier et la fonctionnalité. Donc, avant d'essayer la fonctionnalité continentale, nous devons faire quelque chose ici dans le pourrait nous aider à copier ces Heron le navigateur, puis à les coller ici. Ici, il suffit de l'enfiler. Maintenant, laissez-moi l'éteindre. Voyez-vous que oui, par défaut, ce sera comme ça si vous ne l'avez pas fait auparavant. Donc, si c'est comme ça, il suffit de l'enfiler. Et c'est exactement ce que vous devez configurer pour Gmail. Passez au portefeuille. Et par ici. Je vais juste me recharger. Essayons alors. Ok, donc avant de faire ça, je dois vous montrer correctement mon e-mail. Pour plus de clarté. Maintenant, pouvez-vous voir notre droite, Harold jusqu'au bout ici, je vais avoir un gmail.com. Bon, essayons donc en cliquant sur le même bateau. Attendez-le. Dit merci d'avoir contacté une brume, c'est que tout va heureusement bien comme on le soupçonne, de l'héroïne à Gmail. Et laissez-moi vous montrer. Ils ont raison. Voici donc ça. Le nom est un do baba, l'e-mail est adobe.com et voici le message. Tout est cool, les gars de l'équipe travaillent comme prévu, mais quelque chose ne va pas, donc ils ne devraient pas être là. Donc, peut-être que nous avons quelques tipo sur la route de contact, donc nous le vérifierions plus tard. Laissez-moi vous montrer quelque chose. Comme vous pouvez le voir ici, vous réaliserez que la graisse grillée, qui est la réaction à justifier, n'apparaît pas. Héroïne à code VS sauf en cas d'implémentation. Passez au corticobulbaire. Et ici, nous avons une copie faible, cette Import. Copiez, réagissez davantage pour justifier le harem à VS Code common P, puis réglez pour notre app.js. Et ici, il suffit de coller cette importation, puis de l'emballer avec le récipient à pain grillé. Quelle est la balise à fermeture automatique ? Économisez. Et revoyons ça. Est-ce que tu vois ça ? N'est-ce pas beau ? C'est vraiment incroyable. Je l'aime bien. Essayons donc encore une fois maintenant, je vais cliquer sur le portage Envoyer. Attendez-le. Voyez-vous cela ici alors que les réagissent excessivement pour justifier positionné dans le coin supérieur droit de l'écran. Parfait. Tout fonctionne comme prévu. Allons donc au Gmail. C'est vrai ? Nous devons voir, d'accord, voici le nouveau message. Le nom est John, puis l'e-mail est D DMU.com. Voici le message. Bon, donc pour l'instant, je veux juste que vous les ignorez, d'accord ? Certainement, ou nous allons le réparer lors des prochaines conférences. Tout cela vient de notre première conférence. voit lors de la prochaine conférence. Restez concentré et prenez soin de vous. 47. Correction de bugs: Très bien, donc ici, vous allez vous rendre compte qu'il est dit message du nom du point de données. Il y a évidemment quelque chose qui ne va pas sur l'endroit où nous devons revenir au code VS et résoudre ce problème rapidement. De l'héroïne au code VS. D'accord. Il vous suffit donc de prendre la route de contact. Excusez-moi, je dois le vérifier à nouveau. Indique le message du nom du point de données. D'accord. Cela devrait donc être dans les options de courrier. Nous devons vérifier le message des sels à partir du nom du point de données. Cela devrait être exact. Très bien les gars, je vois, maintenant nous devons utiliser les crochets bouclés k. Je pense que c'est le bon nom. Enregistrez-la sur le navigateur, irréaliste et dehors. Retournez au portefeuille, remontez, rechargez. Essayons encore une fois. Mais le nom du client est Joe. Nous supposons que c'est Joe sur gmail.com. Joe, je veux juste dire, bonjour, j'adore ton projet de portefeuille. Cliquez sur le port d'envoi à moins de le récupérer. Superbe. Est-ce que tu vois ça ? Ma boîte de réception et regardons ça. Nous devons recharger. Jetez un coup d'œil. Voyez-vous un message de Joe ? Parfait, j'adore ça. Maintenant, tout fonctionne comme prévu. Ozone. Il s'agit en effet d'un portefeuille classique, actuellement en hausse. Et laissez-moi vous montrer encore une chose. Lorsque le formulaire est soumis avec succès, nous voulons effacer les champs, n'est-ce pas ? Ce qui signifie que nous voulons définir l'état par défaut des champs. Donc Heron au code VS, sauf si ce n'est pas le cas chaque semaine. Contactez-moi VGS. Ok, c'est vrai, dans cette fonction ici où nous avons le sexe SOC d'un foin. Nous allons donc définir les champs sur son état par défaut Nim. Nous devons définir le nom sur une chaîne vide, en surbrillance dupliquée deux fois. Et ensuite, ici, nous devons les changer par e-mail. Enfin, nous devons le faire pour le message. Coffre-fort. Enlevons-le encore une fois. Relu K. Essayons donc de profiter à nouveau cette fois, Joe. Et il va être joe.com. Pouvez-vous voir Non. Et lorsque le message est, les sous-textes s'actualiseront. Alors dirigez-vous vers la boîte de réception. Voici le nouveau message de Job. Actuellement en place. beau, j'aime bien. Alors mes amis. C'est la fin de l'ensemble du projet. J'espère que vous allez adorer. 48. Nettoyer le code et le préparer pour le déploiement: La dernière étape avant déployer votre application sur Heroku. Code Heroku VS, à moins d'apporter les modifications nécessaires. J'ai ouvert le témoignage, témoignage JS et l'a trouvé. Très bien, Harold sur le bureau où se trouve le projet. Et ici, je l'ai dans le coin supérieur droit de l'écran, portfolio Pro, qui est le répertoire racine ou a été ouvert au public client. Juste ici. Je vais copier le paquet, IMG. Copiez, revenez en arrière, passez au SRC, puis collez-le ici directement dans le SRC. Retournez en arrière, ouvrez encore une fois le public. Mettez de l'héroïne dans le navigateur, et voyons s'il se recharge. Faites défiler jusqu'au témoignage n. Voici ce que vous allez voir à l'écran plutôt que de vous inquiéter, nous allons faire réparer ce problème dans un code GP héroïne à VS. Ok, alors merdez et laissez-moi vous montrer ici, nous allons importer les images. Ok, donc je vais importer, excusez-moi, ouvrons ça sous le nom de RC IMG. Maintenant, ce sont les différentes images qui sont pertinentes pour la composante du témoignage. Nous allons l'importer. Jetons un coup d'œil aux témoignages. Ici, nous avons le Lady Dot PNG, appelez ça P foiré. Et je nommerai cette image dame d' une fois la tête, SRC slash IMG. C'est l'ammoniaque slash Lady Dot PNG. Économisez. Faites défiler jusqu'au premier témoignage et le déteste. Donc, ce que je vais faire correctement dans cette étiquette SRC, l' effacer, puis ouvrir et fermer le support bouclé. Nous devons prendre l'image, madame. En sécurité, d'accord. De l'héroïne dans le navigateur, rechargez. Voyez-vous que c'est le premier témoignage. Plaza. Vous pouvez voir que l'image est apparue. Retournez en arrière. Nous devons maintenant le faire pour le reste des témoignages. Et ici, nous avons l'image pour être myc dot PNG, prise en surbrillance, dupliquée quatre fois 1234. Bon, donc ici, nous devons importer Mike Dot PNG. Faites défiler le premier témoignage vers le bas, le cercle et la Fed. Excusez-moi. Bon, voici la Fed. Aussi dame dot-dot-dot ET OK. Et nous avons aussi man dot PNG défiler vers le haut. Il me suffit donc d'importer tous les fichiers ou images main.py ET de faire défiler vers le bas pour la toute dernière fois. Laissez-moi vous montrer. Donc, la FUTA est foirée. Il suffit d'importer toutes les images. Essuyez ça. Les gars cool. Avec cela, nous sommes prêts à y aller. Donc, ici, on va lui donner un nom. Ça devrait être ma fin. Ceux-ci devraient l'être et cela devrait être de forme. Très bien, les gars, c'est tout pour l'importation. Nous devons donc consommer ces intrants. D'accord ? C'est ce qu'un micro, juste dans le SRC, essuie ce support bouclé ouvert et fermé, puis emmenez-le Mike. C'est aussi simple que ça. Et nous devons également faire la même chose ici. Et c'est encore pour la dame. Enfin, pour le fond sinueux autour du navigateur et du froid, tout est reconnu comme des spectateurs. C'est tout pour l'instant. Lors de la prochaine conférence, nous déploierons ce projet sur Hiroko. Prends soin de toi. 49. Déployer sur Heroku: Très bien, c'est l'heure des camarades de jeu. Et bien sûr, à la fin de cette conférence, vous devriez avoir votre application en direct sur Internet. Ça a l'air bien, beau. Heron au code VS à moins de continuer, ouvrez le fichier server.js. Et si je suis ici, nous allons créer des ressources statiques pour Heroku pour mettre nos fichiers. Et nous allons le faire ici. Nous allons le faire en fonction des conditions. Si le processus dots, ENV, point, charge sur la partition, envie et moi vous montrons rapidement comme héroïne dans le fichier ENV. Voici donc ça. Retour au serveur. Donc, s'il s'agit d'une production égale, ce qui signifie que nous déployons l'application. Voilà ce que nous allons faire. Notre foyer d'accueil, nous devons créer un dossier. Et je vais faire un point ABC énorme. Et bien sûr, il s'agira d'une fonction d'intergiciel. Express dot a commencé ici, directement chez le client, nous allons créer la belle commande. En gros, express.static fournit des fichiers statiques tels que HTML, CSS et les autres. Lorsque nous voulons utiliser la Butte, nous voulons enregistrer ces fichiers dans un ordre magnifique. Par conséquent, si un client fait une demande ou si nous voulons envoyer le fichier index.html en premier. Et bien sûr, vous devez savoir que le index.html comprend l'ensemble de l'application. Abc Dot, allez. D'accord, coin. Ici, nous allons prendre en compte deux paramètres, les demandes et la réponse. Et s'il vous plaît encore une fois, ne permutez pas les paramètres. Laissez-le comme vous le voyez aujourd'hui. Maintenant, nous allons faire le point de repos, envoyer le fichier, le chemin, résolution de points, le soulignement, le soulignement, nom du DIR, qui est le nom du répertoire, est le client, coma. Et là, nous avons le BWT. Et maintenant, nous devons cibler le point d'index HTML. C'est aussi simple que ça. sauver, n'est-ce pas ? Tout est cool. Maintenant, la ligne est de se connecter à Heroku, l' héroïne au navigateur et de rechercher heroku.com. Très bien, je suis déjà connecté, donc je dois juste me déconnecter, donc je vais commencer à partir de zéro. C'est donc exactement ce que vous allez voir si vous avez un compte chez Heroku, vous suffit de saisir adresse e-mail et votre mot de passe. Mais si vous n'avez pas de compte, il vous suffit d'en créer un pour vous-même. Pour ce faire, venez ici et appuyez sur le bouton d'inscription. Lorsque vous cliquez sur le bouton d'inscription, vous accéderez à une page où vous renseignerez les informations nécessaires et que votre compte sera ouvert. Donc, si vous avez déjà un compte ici, je vais rester dans mon compte Gmail, Gmail, puis cliquer sur le lien de connexion. Ok, donc quand vous regardez le bord gauche de l'écran, vous verrez certains des projets que j'ai déployés sur Heroku. Ici. Voyez-vous, ne vous inquiétez pas, si vous êtes nouveau sur Heroku et que vous n'avez pas encore déployé d'application, cette pièce sera vide. Je ne veux donc pas paniquer. Et sur le côté droit de l'écran se trouve une brève description de cette application. voyez-vous ici ? La description des applications est correcte ? Donc, pour créer une nouvelle application, il suffit de cliquer sur midi, OK, puis de créer une nouvelle application. C'est aussi simple que ça. Et ici, nous allons lui donner un nom. Portfolio Pro. indique que Portfolio Pro n'est pas disponible. Cela signifie que ce nom est déjà choisi par quelqu'un d'autre. Donc, d'accord. Nous allons donc avoir ici et faire du portefeuille. Très bien, ce nom est donc disponible. Nous devons utiliser ce nom est sympa, mais oui, il faut donc s'en servir. Et ici, vous devez choisir où vous vous trouvez, ce soit aux États-Unis ou en Europe. Je vais donc quitter les États-Unis. Cliquez ensuite sur l'onglet Créer. Faites défiler vers le bas et permettez-moi de vous montrer que l'application est déployée sur Heroku. Nous allons utiliser toutes ces instructions, héroïne au code VS, à moins de procéder à cela. Ici, sur le code VS, la première fois que nous allons le faire, c'est initialiser la commande B. Bien sûr, vous savez, elle devrait apparaître dans l'Explorateur. Alors ouvrez les clients sur. Laissez-moi vous montrer ici. Vous allez voir ces guides ici. Le voyez-vous ? Mais pour certains d'entre vous, vous n'aurez peut-être pas besoin d'y aller. Il suffit de venir ici en bas à gauche de l'écran. Et vous allez voir l'icône des paramètres ici. Cliquez ici sur deux paramètres. Dans le bac à sable, nous allons chercher Faust exclure. Et ce sont les fichiers exclus. Donc, si le vôtre n'est pas présent dans le répertoire client, il devrait être ici. Ok, il vous suffit donc de le chercher, puis cliquer sur ce bouton ici pour le supprimer du fichier SQLite. vous suffit donc de cliquer sur cette icône ici. C'est vrai ? Donc je vais juste la fermer après toute la lutte. Je suis vraiment désolée, nous n'allons pas l'utiliser ni le répertoire client. Bon, donc voici les guides. Cliquez avec le bouton droit, ferrailler. Fermez le répertoire du client, puis sortez du portefeuille de répertoires racine pro. Assurez-vous que vous êtes en dehors de ce client d'annuaire. Et nous voici dans le répertoire racine. Peut être un déterminant et ensuite venir voir. Nous sommes donc dans le portefeuille de répertoires racine Pro. Ce que je vais faire maintenant, c'est d'initialiser la porte et de récolter dans le répertoire racine. Il s'y met. Pouvez-vous le voir ? chauffez sur la touche Entrée de votre clavier ? Et voici le bien d'un cheveu dans le répertoire racine. L'intention ici est donc d' ajouter tout cela tombe dans la porte. Très bien, faisons-le rapidement. Encore une fois, de l'héroïne au terminal. Maintenant, nous allons faire Git, ajouter un point d'espace. Pouvez-vous voir ce que j'ai fait à l'écran ? obtient de l'espace, bizarre, de l'espace, non. Et cela ajoutera tous les fichiers dans la porte. Le nid et la ligne doivent commettre ces modifications. Un Heroku, Heroku. Ici, nous devons copier le git commit. Et voilà. Copiez-la sur le code VS. Collez-le directement dans le terminal. Une fois encore. Retournez ici. Nous devons copier cette instruction. Copier. Viens ici, collez. Très bien, donc encore de l'héroïne à Heroku. Maintenant, nous devons pousser l'application Heroku, copier cette commande, héroïne sur le code VS, coller directement dans le terminal puis appuyer sur la touche Entrée de votre clavier. Cela va capturer l'application et le déployer sur Heroku. Et cette Butte va prendre un certain temps. Je n'ai donc qu'à suspendre l'enregistrement. L'application a été déployée correctement. Vous pouvez maintenant ouvrir cette application sur le code VS sur Heroku et l'ouvrir. Donc, si vous voulez le faire sur VSCode, suffit d'Heroku. Et cela va démarrer la vie du projet sur le serveur Heroku. Attendons ça. Jusqu'à avant. C'est vraiment incroyable. Je l'aime bien. L'application est disponible en direct sur Internet. C'est vrai ? J'adore ça. Examinons rapidement mon curriculum vitae. Testez l'ammoniac et contactez-moi. beau, j'adore ça. Essayons donc la fonctionnalité continentale. Pour la 41e fois que vous déployez cette application sur Heroku et l'e-mail ne fonctionnera pas. Vous savez pourquoi ? Tout simplement parce que vous devez donner accès à la machine Heroku pour Gmail, à l' héroïne au code, comment le pouvoir a ouvert les matériaux. Cela pourrait aider notre défilement vers le bas. Et voilà. Donnez à la machine Heroku l'accès à votre Gmail. Copiez ce lien ici sur le navigateur. Et bon, je dois juste coller. Tout ce que vous avez à faire est de cliquer sur le bouton Continuer ici sur l'application et d'y jeter un coup d'œil. portefeuille. Le nom de la machine virtuelle va donc être Joe Gmail. Gmail.com. Et Joy veut juste dire bonjour. Bonjour. Cliquez sur le bouton Envoyer. On y va. Voyez-vous que tout fonctionne comme prévu ? Jetons un coup d'œil sur Gmail. Alors Heron à la boîte de réception. Voyez-vous ici le nouveau message de Joe. Et Joe dit : bonjour David. Il s'agit du nom de l'expéditeur, de l'e-mail de l'expéditeur. Et ce message vient de Joe. N'est-ce pas beau ? Classique ? Prenons un atome des plates-formes mobiles. voyez-vous ? Tout fonctionne parfaitement bien ? Et bien sûr, cela est déjà déployé sur la bouée de sauvetage. Vous pouvez utiliser votre téléphone pour l'ouvrir et le vérifier. Parfait. Il s'agit en effet d'un projet de portefeuille classique. C'est souvent pour cette conférence. Et lors de la prochaine conférence, nous allons transmettre le code SAAS à GitHub. voit lors de la prochaine conférence. Prenez soin de vous. 50. Déployer sur Git: Très bien, alors poussons le projet, il a rapidement sauté Heron dans le navigateur. Ensuite, ici, il suffit de faire github.com. Bon, c'est sympa. Donc, si vous n'avez pas de compte sur GitHub, vous suffit de cliquer sur S'inscrire, renseigner les informations nécessaires et configurer votre compte. J'ai donc déjà un compte. Je dois juste signer un et ici je vais fournir mon e-mail. Voici mon e-mail et mon mot de passe. Alors je signe un os ici, c'est mon compte GitHub. Lorsque vous regardez à gauche de l'écran, vous verrez les différents projets que j'ai déployés sur GitHub. Et ici v. Donc, pour vous, si c'est la première fois que vous utilisez GitHub, vous n'avez peut-être rien là. Pour créer un nouveau projet, cliquez sur cette icône juste en haut à droite de l'écran. Cette icône Plus, n'est-ce pas ? Hé, voyez-vous ? Et puis un nouveau référentiel. Nous devons spécifier le nom du référentiel. Portfolio Pro. Nous devons donc fournir ici la description, mais c'est facultatif, mais je vous conseille de toujours lui donner une description. Cool. Faites défiler vers le bas Cliquez sur Créer un référentiel. Très bien, nous allons maintenant suivre ces instructions pour déployer le projet. De l'héroïne au code VS. Venez voir et assurez-vous que vous êtes dans le répertoire racine. C'est tellement important. Et d'accord, fermons ça. Nous n'en avons plus besoin. Je dois donc juste me frotter encore une fois. Scribe. Ici, dans le répertoire racine, nous devons initialiser la nouvelle porte. Je vais donc y faire du bien. Et c'est après avoir initialisé la porte, qu'est-ce qu'on doit faire d'autre ? Quelqu'un peut-il me le dire ? Très bien, ne vous inquiétez pas, je vais vous aider. La prochaine ligne consiste à ajouter les fichiers dans le portail. Tous ces fichiers ici, nous allons l'ajouter à la porte. Donc, pour ce faire, d'accord. Laissez-moi vous laisser pour que vous puissiez le faire. Essayez-le. C'est vrai ? Il suffit de faire de l'espace, des points. Sortez-le. Ne vous accrochez pas à Heroku, désolé, l'héroïne pour attraper Rava. Et ici, nous devons copier cette commande. Et bien sûr, cela va être un commit de fête. Colby. Descendez au terminal, collez encore une fois. Mais pour l'obtenir, nous devons également copier cette commande. Copiez cette instruction ici. Venez au terminal, collez, appuyez sur la touche Entrée. Et enfin, nous devons pousser le projet pour qu'il y ait un saut, un retour en arrière. Et maintenant, il suffit de copier ça. Copier. Nous devons donc apporter quelques changements ici. J'ai écrasé la clé pour l'obtenir une arme à feu. Bon, donc l'opération est couronnée de succès. Nous devons le vérifier sur GitHub, Harold à GitHub. Tout ce que nous avons à faire en ce moment, c'est de recharger. Jetez un coup d'œil. Pouvez-vous voir de belles choses. Nous avons maintenant déployé le projet sur GitHub. Et j'espère que vous avez appris quelque chose beau dans ce cours. Ils ont raison.