Principes de base modernes de React : Créer un générateur de citations

1. Introduction: Dans ce cours, je vais vous enseigner les fondamentaux de React, ce que c'est, pourquoi je pense que c'est une excellente bibliothèque à maîtriser et comment implémenter les meilleures pratiques les plus récentes dans vos projets Web. React est l'un des principaux frameworks ou bibliothèques dans la création d'interfaces utilisateur interactives transparentes. Il est donc essentiel tout développeur Web frontal ait une certaine expérience dans le domaine. Tout au long de ce cours, je vais vous apprendre à travailler avec les composants fonctionnels React, JSX, les accessoires, les hooks, la gestion de l'état, comment déboguer et tester votre application. Difficile d'ajouter des styles et bien plus encore. Tous ces éléments sont essentiels à connaître lors de la construction de grandes interfaces utilisateur avec React. En suivant avec moi toutes ces leçons, vous utilisez ces compétences nouvellement acquises pour créer votre propre générateur de devis. Chaque étape de la création de ce générateur de devis couvrira tant de compétences importantes dont vous aurez besoin pour devenir un développeur React complet et confiant. Je suis David et je suis un développeur web frontal de Northridge en Angleterre. J'ai de nombreuses années d' expérience dans la création applications numériques pour d'applications numériques pour divers clients internationaux. Amusez-vous à aider d'autres développeurs Web comme vous à améliorer leurs compétences, ce qui les aidera à poursuivre leur carrière et fin de compte, à devenir le meilleur développeur ou aléatoire qu'ils peuvent être. Mais je déteste parler de toi. Passons donc rapidement à autre chose. Ce cours est sous la direction d' étudiants qui ont des connaissances de base sur les technologies frontales y compris JavaScript, mais qui aimeraient apprendre à réagir. Même si vous venez d'un langage de codage différent, vous pouvez toujours suivre le cours tant que vous connaissez les concepts de base des fonctions, des tableaux et des objets. Si vous êtes un débutant complet pour réagir, c'est tout à fait très bien. Tout ce dont vous avez besoin pour créer votre projet de classe c'est votre IDE préféré. Vs code sera mon éditeur de code de choix utilisé dans cette classe. Mais tous les autres que vous êtes à l'aise de vous utiliser sont tout à fait très bien. Lorsque vous aurez fini de créer votre générateur de cœur, vous déploierez un produit sur le Web à l'aide de Netlify. Ils s'inquiètent, je vais vous montrer à quel point il est facile faire et tout est complètement gratuit. Grâce aux compétences que vous gagnerez dans ce cours, vous pourrez offrir beaucoup plus en tant que développeur, vous soyez freelance ou que vous travailliez pour une entreprise, React reste la bibliothèque JavaScript la plus populaire utilisé dans le monde. De nombreuses applications Web sont créées à l'aide de React. Une fois que vous aurez besoin de ces nouvelles compétences, vous serez en mesure de démontrer vos connaissances à toute entreprise à la recherche développeur frontal hautement qualifié et solide. À la fin de cette classe, vous serez en mesure de créer des performances lisses et hautes performances, d'utiliser des interfaces utilisant les dernières fonctionnalités de React. Sans plus tarder, commençons. 2. Introduction du projet: Dans cette classe ensemble, nous construirons un générateur de guillemets aléatoires tout à l'intérieur, réagissez. Lorsque vous appuyez sur ce bouton une nouvelle citation aléatoire apparaîtra instantanément. Il s'agit d'une application d'une seule page, qui comprendra une zone pour remplir le devis, un simple pied de page. Et je vais vous montrer comment gérer l'état de votre demande. Si vous suivez avec moi, ce que je vous encourage fortement à le faire, vous pouvez également créer quelque chose comme un générateur de faits aléatoire ou une application similaire qui regarde du texte remplissez aléatoirement une chaîne de texte aléatoire. Le texte lui-même n'était pas trop important. Ce sont toutes les techniques React que nous vous présenterons dans chaque leçon qui sont importantes. Maintenant, j'ai choisi un générateur de devis comme projet à construire car il s'agit d'une application Web idéale que nous couvrirons nombreux concepts importants de React. Cela inclut l'utilisation composants enfants du paradigme de gestion de l' état, travail avec des accessoires, le travail avec les crochets et les données de hauteur utilisées par Kennedy dans React. Premier projet réussi. Essayez d'utiliser tous les concepts que je vais vous montrer dans ce cours. Si vous êtes particulièrement confiant pour les points bonus, n'avez pas lu les documents de développement React officiels et incluez d'autres contextes qui ne sont pas couverts par ce cours. Vous pouvez également essayer d'inclure des composants supplémentaires tels qu'un en-tête ou même des pages supplémentaires. Essayez également de démarrer votre court généré différemment en utilisant votre propre mise en page, polices et couleurs. Les élèves doivent utiliser leur IDE ou leur éditeur de code préféré pour construire leur projet de classe. J'utiliserai du code VS, mais n'importe quel IDE fonctionnera tout aussi bien. Vous devez maintenant utiliser un terminal disponible sur la plupart des systèmes d'exploitation. Mais j'utiliserai le terminal fourni avec VS Code. Bien sûr, vous utiliserez le terminal pour créer le projet et vous aider à déployer votre projet final à l'aide de Netlify. Ne vous inquiétez pas, je vais vous montrer à quel point il est facile de configurer cela et de pousser votre travail sur une page Web en direct pour que tous puissent le voir. Et nous pouvons tout faire en moins d'une minute. Tout mon travail sera sur GitHub à cette URL. Vous pouvez donc voir mon projet final. Je l'utiliserais à titre de référence si vous restez coincé. Et j'inclurai cette URL dans les notes de cours indiquant que lorsque vous aurez déployé votre projet, il sera génial pour vous de partager des captures d'écran et de créer un lien vers votre générateur terminé. Pour ce faire, téléchargez votre travail dans la section de votre projet sur Skillshare. C'est un excellent moyen d' obtenir des commentaires de moi, des autres étudiants et de montrer en priorité votre travail et vos compétences de réaction de votre nouvel ami. Bien sûr, si vous avez des questions, hésitez pas à me le faire savoir. Jetons maintenant un coup d'œil à ce qu' est réellement React dans la prochaine leçon. 3. Qu'est-ce que React et pourquoi l'utiliser ?: Qu'est-ce que React et pourquoi l'apprendre ? Tout simplement, comme indiqué sur le site officiel de React, React est une bibliothèque JavaScript utile pour construire des interfaces utilisateur. Avec React, vous pouvez concevoir vues simples pour chaque état de votre application. Réagissez à une telle efficacité qu'il saura mettre à jour les composants corrects uniquement lorsque vos données changent, en rechargeant la page entière. Cela le rend idéal pour l' application d'une seule page que nous allons construire dans cette classe. Cela signifie que votre application React aura d' excellentes performances et sera très rapide. Chaque composant est encapsulé, ce qui signifie que chaque composant gère son propre état. Composants, mixtes, faciles à gérer tout votre code vous permettant de réutiliser les composants dans l'ensemble de votre application. To React est désormais utilisé sur plus de 10 millions de sites Web dans le monde. Cela signifie également qu'il existe une communauté forte avec excellentes ressources pour vous aider dans votre voyage. Il y avait également une courbe d'apprentissage beaucoup plus fluide que son homologue Angular. Et j'espère vous le montrer dans ce cours. Allons-nous mettre en place notre projet ? Nous allons le faire dans la prochaine leçon. 4. Configurer votre projet React: Permettez-moi maintenant de vous montrer comment créer votre projet React et comment le mettre en œuvre. J'ai donc déjà ouvert le code VS ici. C'est donc l' éditeur de code que je vais utiliser. Alors, s'il vous plaît, faites de même, ouvrez le vôtre et suivez-moi. La première chose que j'ai faite est de créer un dossier vide appelé générateur de citations. Cours ce que vous voulez et enregistrez-le là où vous le souhaitez. n'y a pas encore de fichiers là-dedans, mais c'est ce que nous allons mettre en place. Maintenant, pour créer un projet React, vous devez vous assurer que Node JS est installé. Si aucun JS n'est déjà téléchargé, accédez à Node js.org. Cette page vous sera présentée . Maintenant, comme vous pouvez le constater, il est déjà détecté que je suis sur Mac iOS et que vous souhaitez télécharger les derniers fichiers téléchargés ou actuels ici. Maintenant, Node est déjà installé, donc je n'ai pas besoin de le faire. Mais lorsque vous cliquez dessus, un assistant d' installation vous sera présenté. Et il vous suffit de suivre les étapes jusqu'à ce que vous ayez un nœud sur votre système. Et alors, comment vérifier si vous avez un nœud ? Je vais juste ouvrir un terminal. Et donc si VS Code dans un nouveau terminal, si vous n'utilisez pas de code VS et que vous n' avez pas de terminal dans votre éditeur de code. Vous ne pouvez pas simplement utiliser n'importe quel terminal fourni avec macOS ou Windows. Je viens donc d'ouvrir un terminal ici, mais je vais le fermer parce que j'utiliserai le total à l'intérieur des courbes S. J'espère donc que c'est logique. Quoi qu'il en soit, pour vérifier que Node est installé, je vais juste écrire le nœud dash V, qui correspond à la version. Et il peut voir que 17.9, donc c'est installé. Si vous voyez ces numéros ici, après avoir écrit le nœud b , le nœud est correctement installé. Qu'est-ce que le nœud exactement et pourquoi en avons-nous besoin ? Fondamentalement, il s'agit d'un environnement serveur et entièrement open source, multiplateforme. Maintenant, cela permet d' utiliser JavaScript pour écrire outils de ligne de commande ou de terminal pour les scripts côté serveur. Et c'est exactement ce dont nous avons besoin pour créer cette application React. Comment créer l'application React ? Nous écrivons en px, créons un tiret, réagit, tiret, espace. Vous pouvez ensuite écrire le nom de votre dossier ou de votre application. Mais je voulais juste utiliser le générateur de citations, qui est le nom de mon dossier ici. Pour ce faire, j'utilise simplement un point au lieu d'un nom et j'appuie sur Entrée. J'ai besoin d'installer, de créer, de réagir. Ok, pour continuer, oui, j'ai cliqué sur Y. Et voici l'application React et tous les fichiers et dossiers nécessaires. Donnez-lui juste une seconde. peut prendre un certain temps en fonction des phos élevés d' une machine est désolé, je n'ai pas à passer tout notre processus d'installation car cela prenait un peu de temps. Ici, nous voulons stocker plein, correct. Tout va bien. Comme vous pouvez le voir à gauche ici, nous avons cette structure de dossiers qu'il a créée. Nous avons donc de la sauce avec divers dossiers. App.js en tant qu'application racine de base. Beaucoup d'autres fichiers ici. Nous y arriverons dans une minute. Maintenant, pour démarrer cette application dans votre navigateur, encore une fois dans le terminal, laissez-moi tout effacer. Si j'écris npm arrêté, pas MPS, NPM, qui signifie Node Package Manager, qui vous donne différents scripts que vous pouvez exécuter. Je voulais juste arrêter cet espace MPM. Entrée arrêtée. Je suppose que c'est un peu très bien. Il devrait ouvrir un onglet ou une fenêtre. Et si ce n'est pas le cas, ou vous devez le faire, c'est aller trois fois à l'hôte local et nous y allons. Maintenant, si vous pouvez voir cette page, votre réplication a réagi lors de la configuration. Départ. Tout va bien. Maintenant, si vous ne voyez pas cela, vous ne le voyez pas dans l'hôte local 3 000. J'ai dû être une erreur quelque part. Et ensuite, il vaut la peine de vérifier ce que dit votre terminal , car il vous donnera probablement des messages d'erreur, nous expliquerons exactement où se trouve le problème. Ok, maintenant nous savons que c'est opérationnel. Il suffit de ranger certains fichiers dans app.js, qui est le fichier parent de l'application. Nous n'aurons pas besoin de la moitié de cela, alors débarrassons-nous de tout ce qui se trouve dans la div, l'en-tête. Je vais juste inclure un H1 pour dire. Jen. Juste pour nous assurer que nous savons ce que c'est. Cette mise à jour est mise à jour en temps réel, comme vous pouvez le constater, nous avons perdu l'animation et elle contient le nouveau texte. Il n'est donc pas nécessaire de continuer à actualiser cela ou de continuer à démarrer le serveur. Tout cela a l'air de bonnes mises à jour en temps réel. Nous n'avons plus besoin d'importer le logo. Gardez ça. Dans la source telle que nous sommes ici, mettons en place une structure de dossiers. Maintenant, c'est comme ça que j'aime faire pour garder les choses propres et bien rangées. Vous pouvez me copier ou pensez-vous différemment ? Mais nous aurons besoin d'un dossier pour nos composants. , c'est à l'intérieur de la source. Également à l'intérieur de la source, disposons d'un dossier pour nos données, nos données textuelles. Et ensuite, nous allons faire de même pour le dossier styles. Pour les styles. Tout ça a l'air bien. De quoi d'autre pouvons-nous nous débarrasser ici ? Débarrassez-vous des outils Web phi cool chaque fois que nous faisons des tests et débarrassez-vous des tests de configuration. Tout ça va bien. Ce qui signifie que c'est l'indice js. Nous pouvons nous débarrasser de ce que nous avons supprimé. Et aussi cette partie du bas. On y va. Compilé avec succès. Index js tient notre app.js, qui devrait simplement avoir le tribunal janvier pour se débarrasser également de ce test. Oui. Et la moitié pour le faire, mais n'a pas utilisé ces fichiers. Gardons les choses propres et bien rangées, agréables et simples. Avec le chargement de l'école à ce stade, permettez-moi de vous montrer quelques extensions utiles que j'utilise dans le code VS juste pour gagner du temps. Donc tout au long de ce cours, vous me verrez utiliser des raccourcis clavier et des choses juste pour gagner du temps et des efforts. Vous pourriez trouver cela utile pour vous montrer cela dans. Donc, les composants, je vais juste créer un composant pour le pied juste pour tester ces choses que je vous ai montrées. Nous appellerons donc ce point de pied de page js. Habituellement, c'est la convention normale de commencer le composant js par une majuscule. Le premier raccourci utile consiste à créer un composant fonctionnel React. Je vais simplement taper II et tab et il a créé une structure de composant ici. Ce qui fait c'est une extension que j'utilise des extraits de code, des extraits DX7 et mise à jour. Cela me donne donc beaucoup de raccourcis clavier juste pour gagner du temps. Gardez donc un œil sur cette extension exacte. Une autre extension utile que j'utilise s'appelle plus jolie. Si je devais simplement déplacer ça pour que ça n'ait pas l'air très bien. Si je mets ensuite en surbrillance l'école et que j'utilise le raccourci clavier, Bennett le met en place. Maintenant, cela utilise plutôt Act. Donc, si nous allons à Extensions, encore une fois, je l'aurai déjà installé. Puisque tu es plus jolie. Ce devrait être le meilleur résultat ici. Code toute la matière. Vous pouvez voir que ce fichier utilise des protéines qui meurent en bas ici. Je n'ai pas vraiment vu que c'est plus joli ici. Laissez-moi simplement remonter ça. Juste pour que vous sachiez que cela est en cours d'exécution dans ce fichier. C'est un excellent gain de temps. Un autre, nous devions modifier cette balise d'ouverture. Si je change cela par un, disons, vous pouvez voir que la balise de fermeture est également mise à jour et obtient vos extensions. Celui-ci s'appelle la balise de saisie automatique. Et pourtant, nous y sommes allés. Donc, ce top ici. Encore une fois, très utile, surtout si la taille de vos fichiers augmente, vous n'avez pas besoin de trouver cette balise de fermeture inférieure en bas de la documentation. Vous savez, si vous mettez à jour cela, alors la deuxième balise, la balise de fermeture est également mise à jour. Avec cela, votre application est entièrement configurée et prête à l'emploi. Regardons un peu plus de code. Et c'est en fait créer l'application elle-même. 5. Composants et JSX: Parlons de composants et de JSX. Tout d'abord, à l'écran, nous avons la composante coût et une composante fonctionnelle. Tout au long de ce cours, nous travaillerons avec des composants fonctionnels en voulant simplement vous montrer la différence entre les deux. Lorsque React a été créé pour la première fois, il était assez courant d'utiliser des composants de coût. Cela impliquerait le basculement, la classe de mots, le nom que vous pouvez faire. Vous devrez étendre le composant React point. Vous devez inclure un rendu pour renvoyer le code HTML réel. Et si vous changez d'état, vous devrez inclure un constructeur. Vous devez inclure super, utiliser ce mot-clé, le, ce mot-clé pour changer d'état. Composants fonctionnels. Nous ne sommes vraiment habitués que si vous rendez un composant ou du code. Si vous travailliez avec un changement d'état, vous devez utiliser un composant de classe. Mais tout cela a changé maintenant. Vous pouvez utiliser des crochets pour gérer l' état à l'intérieur des composants fonctionnels. Je trouve la fonction Comparer. C'est un peu plus facile à comprendre. Mais cela peut être différent pour quelqu'un d'un arrière-plan de programmation orienté objet tel que Java. Mais je trouve que les composants de la fonction consomment moins de code. Et comme je l'ai dit, avec l'introduction de crochets, vous pouvez maintenant gérer l'état. Il y a moins de code. Je pense que c'est plus soigné, donc nous allons travailler avec des composants fonctionnels tout au long. Non, le composant fonctionnel est essentiellement une fonction JavaScript déclarant le nom constant Hayek ou fitter. Et c'est juste une fonction de flèche simple. Ensuite, nous retournons le code HTML. Maintenant, il n' est plus nécessaire d' importer React depuis React d' importer React depuis React, car cette application sait déjà qu'il s'agit d'un fichier React. La seule fois où nous allons l' importer de cette façon, c'est quand nous commencerons à utiliser des crochets plus tard dans la ligne. Mais pour l'instant, nous pouvons supprimer cela. Cela rend le code encore plus net. Cela peut paraître bizarre. Mettre une maquette dans JavaScript ne montre pas que vous vous y habituerez, mais c' est essentiellement ce qu'est JSX. Maintenant, toute la logique et le travail pour le pied prêt resteront dans le fichier js point de pied de page. Et il est plus facile de gérer le balisage et logique dans le même fichier. React se concentre sur la séparation des préoccupations plus que tout. Ici, c'est ici que nous exportons le pied de page. Et nous disons que ce pied de page est la chose par défaut à exporter. Vous pouvez renvoyer d'autres composants ou fonctions ici. Nous disons simplement qu'il y a le pied par défaut à explorer à partir de ce fichier. Maintenant, à l'intérieur du retour se trouve le balisage, qui est essentiellement HTML. Donc, si vous connaissez déjà le HTML, vous pouvez l'écrire de la même manière. Cependant, dans quelques cas certains attributs sont nommés légèrement différemment. Par exemple, si vous vouliez ajouter une classe, disons que la classe est un mot réservé, comme je viens de vous le montrer plus tôt. Vous pouvez utiliser des composants basés sur des classes dans React. La classe devient ClassName comme ceci. Et déjà mon candidat, est-ce que c'est me dire ou suggérer le nom de la classe, Voici la bonne chose à utiliser. N'oubliez pas d'utiliser ClassName et non classe. De plus, si vous travailliez avec Forms, disons créer, disons une étiquette pour un formulaire le plus fluide sur une autre ligne. Si vous liez cela à une entrée, vous en avez normalement quatre, puis l'ID de l'entrée. Quatre est également un mot réservé. Vous devez vous rappeler d'inclure HTML Full avec CamelCase comme ceci. Juste utile de se rappeler que cela est supprimé. Nous n'ajouterons pas encore de styles. Mais pendant que vous êtes dans le pied de page. Passons simplement à une balise de pied de page. Ensuite, je vais mettre le texte dans un paragraphe comme ça. Et puis mettons à jour cela pour dire quelque chose comme cogénération à David JC Lee, c'est moi. Ensuite, nous ajouterons un symbole de copyright comme celui-ci, une esperluette. Supprimez ces personnages. Je dis copier le point-virgule 2022. Une autre chose à prendre en compte est dans ce retour, si votre code HTML commence à devenir assez grand, ce qui est ici, vous pouvez, bien sûr, mu est M sur deux lignes distinctes. C'est comme ça, mais n'oubliez pas d' inclure des parenthèses autour de tout entre parenthèses comme celle-ci. En utilisant plus joli, je vais juste formater cela sur la touche Commande a pour tout sélectionner. Ensuite, je vais maintenir l'option Maj F sur Format. Et ensuite, nous économiserons beaucoup plus propre. C'est essentiellement notre pied de page complet. Passons à un autre composant. Vous pouvez sélectionner le répertoire des composants. Créons un composant pour le devis. Donc la citation ab.js, car c'est juste un fichier JavaScript. Et puis en utilisant mes raccourcis d'extension S7 ou l'onglet ICF, effectivement supprimé l'entrée car elle sait déjà qu'elle est réactée. Devis. Ok, super. Nous avons déjà des parenthèses pour plusieurs lignes au retour lorsqu'il retourne la maquette. C'est donc pratique. On va juste espacer un peu ça. À l'intérieur de la div. Utilisons en fait une balise blockquote, et ensuite nous allons juste coder une requête en dur. C'est une excellente citation que je vais faire pour l'instant. Et puis pour le nom de la personne qui a dit la citation, mettons-la dans les balises de paragraphe. Donnons juste votre nom. Bien sûr, lorsque je travaille avec des données réelles en bas de la ligne, nous rendrons cela dynamique à la fois la citation et le nom. Mais pour l'instant, nous ne faisons que rassembler le composant de base. Encore une fois, je vais appuyer sur Commande une option de décalage F, adorable au formatage. Et c'est notre deuxième composante enfant. Maintenant, quand je dis « composant Charles », cela signifie que la photo et la citation doivent vivre à l'intérieur d'un composant parent. Maintenant, le composant apparent est app.js, qui aurait dû être créé lorsque vous avez créé votre application React. Plus tôt. Nous venons de le coder en dur dans ce générateur de devis. Pendant ce temps, changeons donc la maquette. Donc, en fait, nous allons quitter ce Davidson, mais nous allons le mettre dans une section, envelopper tout ce qui se trouve dans cette section comme ça. Nous finirons par avoir la zone de devis ici. Commentez qu'ils sont entre la div, la section que nous aurons éventuellement le pied de page ici. Nous allons juste commenter ce calcul pour l'instant. Sous la requête, nous aurons besoin d'un bouton pour randomiser chaque groupe. Il suffit donc de créer un bouton ici. Et je vais écrire le texte généré pour le bouton. Maintenant, vous pouvez voir que rien ne change à droite. C'est parce que nous devons démarrer le serveur. Il suffit de ne pas commencer l'inter. Attendez que ça se charge. En démarrant le serveur de développement, ils ont été compilés avec succès. Ensuite, nous pouvons voir notre bouton Générer. Avant d'apporter la citation et le pied de page, tout comme pour pointer tout comme pour pointer un conseil pratique alors que c'est déjà un pourboire, c' est quelque chose que vous devez savoir. À l'intérieur de notre retour, nous avons essentiellement un emballage. C'est donc la section. Si je devais en mettre un deuxième ici. Deuxième section. Deuxièmement, vous pouvez voir qu'il y a des lignes rouges partout. Il se plaint, ça ne l'aime pas. Si nous survolons le texte, vous pouvez voir que les expressions JSX doivent comporter un élément parent. Que se passe-t-il si vous aviez réellement besoin deux frères et sœurs comme ces deux sections ? Eh bien, vous avez besoin d' une sorte d'emballage. Cela fonctionnerait si vous aviez une div extérieure. Ce sont les deux. Mais si vous ne vouliez pas inclure une journée de juste pour cela, vous pouvez utiliser un fragment React et tout ce qui est une div vide comme celle-ci. Vous pouvez voir ici une table vide et une div de fermeture vide ici. Ce sont des fragments React. Heureusement, nous n'avons pas besoin d'une deuxième section. Je ne faisais que vous le montrer à titre d'exemple que vous puissiez vous en débarrasser. Débarrassez-vous de ce fragment d'ouverture et sauvegardez ça. Ensuite. Importons notre composant de devis que nous avons jamais créé. En dessous de cette entrée du CSS. Encore une fois, cette application Dot CSS a été fournie avec son application Create React. Nous n'en avons peut-être pas vraiment besoin, alors supprimons cela pour l'instant. Pour importer un composant enfant dans le parent, nous pouvons effectuer un devis de saisie à partir de. Ensuite, en tant que chaîne, nous devons entrer dans les composants obliques, les guillemets obliques. Ok, super. Il indique que la citation est déclarée , mais sa valeur n'est jamais lue. Tout ce que nous faisons ici, c'est d'avoir un composant de devis auto-fermé comme celui-ci. Seul le nom du crochet de fermeture oblique du composant. Ça, nous allons sauver. Et puis, à l'oreille droite, nous pouvons voir que nos soins cardiaques ont bien fonctionné. Faisons de même pour le pied de page. Pied de page de désolé, barre oblique des composants barre oblique. Mieux. Je fais le même pied de page. Fermez cette sauvegarde. Et c'est notre pied de page. Nous avons importé des composants enfants dans notre composant parent. Maintenant, l'avantage de séparer ces composants, c'est que vous pouvez les utiliser partout car ils sont composés. Il s'agit donc essentiellement d'une composante quo. Nous pourrions doubler, tripler, économiser. On y va. Nous en avons trois. Donc, ce composant peut être déposé n'importe où dans notre application et il fonctionne indépendamment. Chacun les compare, gère son propre état, ses propres styles et tout ce qui s'y rapproche. Il peut donc être déposé partout pendant que nous sommes ici. Avant que j'oublie, si vous vouliez arrêter votre serveur, vous pouvez voir que cela fonctionne toujours à l'intérieur votre terminal ou que vous faites Contrôle et C. Et puis vous pouvez voir que cela s' est arrêté. Et puis, si je devais rafraîchir cette page, il n'y a rien ici car nous avons arrêté le vendeur. J'espère que tout cela a du sens. Passons maintenant à travailler avec les invites. 6. Accessoires: Jetons un coup d'œil à l'utilisation de propriétés ou d'accessoires. Laissez-moi d'abord redémarrer le serveur. Nous n'arrêterons pas, appuyez sur Entrée. Les accessoires sont utiles pour transmettre des données dynamiques du promoteur parent à ses différents composants enfants. Que pouvez-vous transmettre ? Eh bien, presque n'importe quoi vraiment. Dans cet exemple, vous n' avez pas besoin de suivre avec moi. Ce ne sont là que quelques exemples avant de commencer à travailler avec nos données réelles. Ce que je vais faire en premier, c'est dire que nous voulions changer le nom dans le pied de page. Voici donc notre pied de page dans le parent. Nous pouvons ajouter un attribut, disons un nom. Vous pouvez appeler ça comme vous le souhaitez. Mais nous avons changé de nom. Et puis changeons ce nom pour dire, Jim, gardons ça. Vous êtes à l'intérieur de notre pied de page. Comment recevons-nous une chaîne de texte en arrière ? Eh bien, les parenthèses ici, le paramètre doit être des accessoires. Les accessoires, le jeu est tiré de la même façon. Il est déclaré que sa valeur n'est jamais lue. Comment mettre à jour ce texte ici ? Supprimons cela. Et puis, ce que nous devons faire, c'est ouvrir quelques bretelles bouclées. Et c'est ainsi que nous utilisons JavaScript dans ce JSX. Nous pouvons écrire n'importe quel type de médicaments ici, mais nous allons travailler avec les variables accessoires. Nous utilisons des props puis arrêtés et tout ce que nous avons nommé ici, qui est nommé nom de point approximatif. Nous allons l'enregistrer et il est mis à jour pour Jim ici. Nous pouvons également l'utiliser plusieurs fois sur la deuxième photo et changeons le Dave, c' est que la chose honnête nommée Julie va frapper sauver. Et on y va. Nous avons la même chose pour deux composants, utilisés trois fois plus, mais il accepte trois types d'accessoires différents. Maintenant, vous pouvez également transmettre des variables, cliquer sur l'intérieur de notre application. Créons un const. Nous appellerons ce nom un. Enregistrera sous forme de chaîne appelée Jamie. Le nom un peut être utilisé ici à la place de Jim, mais ce n'est pas une chaîne. Assurez-vous donc d' utiliser des accolades bouclées. Et nous allons mettre le premier nom là-dedans. Je dis « Sauver ». Et il y a Jamie. Supprimez les pieds de page. Que pouvons-nous passer d'autre ici ? Débarrassons-nous de notre nom premier, laissez-nous transmettre une sorte de booléen. Nous aurons donc un vrai ou un faux. Et ce que nous pouvons faire, c'est que le pied de page apparaîtra ou masquera cette date. Appelons notre score d'année constante. Et nous allons définir cette valeur sur false car nous allons masquer dans le pied de page et supprimons cet attribut. Disons que nous appellerons ça. C'est ce qu'on appelle une année. Ensuite, dans certains accolades, nous transmettons notre variable ci-dessus. C'est ce qu'on appelle l'année, donc en pied de page, nous devons simplement revenir à mon nom. Si difficile à transporter. Comment pouvons-nous montrer et cacher ? Cette année ? Encore une fois, nous devons ouvrir les bretelles bouclées. Et nous allons simplement utiliser un abrégé conditionnel. On va donc passer des accessoires, des accessoires, des points, qui vient d'appeler l'année. Je pense que nous sommes juste en train de passer. Si props dot year est vrai, nous afficherons la chaîne de 2022. Sinon, nous n' aurons qu'un arbre vide, des chaînes vides, donc nous allons simplement nous cacher. Ce n'est qu'un raccourci. Le point d'interrogation est essentiellement un si, s'il est vrai, et ce codon est fondamentalement un autre. Voyons voir, nous sauverons cela et nous l'avons effectivement dans notre année. Donc, si nous revenons à nos parents, changeons cela en faux. Désolé, changez cela par vrai parce que nous voulons vous montrer ici. Nous sauvegarderons cela et montrerons l'année. C'est très pratique pour afficher et masquer des éléments tels que du contenu texte ou même changer noms de classes en raison d'un style différent. Revenons à l'époque où nous avions un nom ici. Oui, un nom approximativement ici. Nous reviendrons en nom, changerons cela en nom, puis modifions le nom de notre variable. J'ai changé le nom en Keith. Keith a créé ce générateur de requêtes, eh bien, les dents d'âne. Mon prochain exemple est que vous pouvez définir des accessoires par défaut. Par exemple, nous avons ici un nom de point d' accessoires. Mais si Keith n'est plus disponible, nous pouvons faire un double tuyau, ce qui signifie que tous les accessoires sont le nom du point ou la mise en commun. Cela n'a pas changé, ça dit toujours des dents parce que Keith est déclaré ici. S'il s'agissait d'une chaîne vide, supposons que les accessoires ne soient plus disponibles. Enlevez donc ça. Ensuite, nous avons une mise en commun ici parce que le nom est vide. Nous transmettons un accessoire de mélange. À l'intérieur des accessoires, le nom des points d'accessoires n'est pas disponible. Nous nous sommes donc consacrés à tirer. Cela est également utile pour la sauvegarde si vous n'avez pas données ou si aucune donnée n'est transmise. J'espère que c'est logique. Non, nous pouvons rendre cela encore plus propre. Imaginez que vous ayez plusieurs textes. Ensuite, vous devez écrire des accessoires encore et encore. Nous avons utilisé le mot accessoires quatre fois là-bas. Mais ce qu'il nous faut, c'est le nom. Maintenant, nous pouvons ce qu'on appelle D structurer ces accessoires. Nous pouvons donc simplement obtenir un nom et le faire. Supprimez à nouveau les invites entre accolades, nous pouvons simplement écrire le nom du mot. Débarrassez-vous de ces noms multiples. Et cela signifie que nous avons juste besoin de votre nom comme du gras. C'est vraiment nécessaire. Vous n'êtes que des économies et des textos. N'oubliez donc pas d'utiliser les accolades pour mettre la main sur l'une de ces invites transmises par le parent. Même si nous avons utilisé le pied ici et que nous n'avons pas besoin de transmettre quoi que ce soit au pied de page. Débarrasse-toi de ça. Revenons à mon nom. Ce sera votre nom. Bien sûr, si vous avez créé une photo de vous-même, dites-le encore une fois. C'est de retour à la normale. Je pense que nous avons fini avec une photo pour l'instant jusqu'à ce que nous commencions à la coiffer. Nous sommes donc plus préoccupés par le devis généré dans le composant de devis. Ce code est donc codé en dur et ce nom est codé en dur. Le cours que nous voulons transmettre des données réelles à l'intérieur de l'application. Je vais créer votre objet et nous allons appeler ces données égales, et cela va être un objet. Et la raison pour laquelle c'est un objet c'est parce que nous sommes en train de passer. J'ai besoin de deux choses ici, la citation et le nom. Disons que le nom est égal à Joe Bloggs. Et disons que la citation est dans la chaîne. C'est une cour géniale. Ces données sont celles que nous aimerions transmettre à notre composant de devis. Appelons ces données. Nous faisons référence à l'objet de données ci-dessus. Dans la citation, commençons par un nom ici. Supprimons ça, quelques accolades bouclées. Et avant que j'oublie, nous devons apporter des accessoires ici. Il accepte les accessoires et M, nous devons référencer les données de points d' accessoires. Et puis dans notre objet, nous avons le nom, le nom. Épargons. Et nous y sommes arrivés. Joe Bloggs utiliserait la même chose pour la citation pour avoir besoin du texte codé en dur, accolades ouvertes, des accessoires, des données de points, des guillemets. C'est une citation géniale. Super. Ok, je vais être vraiment ennuyeux et y ajouter des citations pour qu' il semble qu'une citation réelle soit meilleure. N'oubliez pas que nous pouvons détruire cela. Débarrassez-vous des accessoires pour fabriquer ces accolades bouclées plus soignées. Nous appellerons que ces données ne l'ont pas fait. Ce qui signifie que nous pouvons nous débarrasser des données prop dot, le nom du point de données doit rester exactement le même. Nous travaillerons avec plusieurs guillemets parce que l'idée est appuyer sur Générer, puis d'afficher une citation aléatoire. Pour l'instant, nous allons juste coder dur, disons cinq citations différentes. Cela signifie donc que cela ne va pas contenir un seul objet. Il contiendra cinq objets, ce qui signifie que nous devons l' inclure dans un tableau. Donc, le crochet carré, le crochet carré rend l' espace plus facile et plus clair sur le côté et tout ce que je vais faire est de frapper une virgule là et je vais copier ça cinq fois. Ensuite, je vais changer le nom et la requête de chacun d'eux. Utilisez donc le texte que vous voulez utiliser, quel que soit le nom que vous voulez, où que vous le vouliez, vous n'avez pas seulement cinq, vous pouvez en avoir trois où vous pouvez en avoir 100. Assurez-vous simplement qu'il respecte ce format. Assurez-vous donc d'utiliser vos propres devis partout où vous collectez des informations. Vous ne pouvez pas simplement écrire cet acte, mais je vais juste accélérer ça. Je vais le faire très rapidement et nous reviendrons bientôt. Super. S'il y a cinq guillemets codés en dur, cinq objets dans le format du tableau de données. C'est ça, tout est soigné. Maintenant, vous pouvez voir que cela n'est pas peuplé ici. Et c'est parce que nous travaillons maintenant avec des objets à l'intérieur d'un tableau. Il ne sait donc pas ce que je viens de transmettre. Essentiellement, je ne transmets pas un tableau. Par conséquent, terminer le devis. Cela n'a plus de sens, car les données sont un tableau, donc elles ne savent pas quelle requête extraire de ce tableau. Il suffit de tirer la première citation vers le bas. Donc, faisons simplement le crochet de données 0. Pour l'instant, nous allons dire que c'est notre toute première citation. Une fois encore. Je vais bientôt vous montrer comment changer cela. C'est donc dynamique et partage des citations et des noms aléatoires. Non, pour tout cela, nous allons commencer à regarder les crochets et les crochets que notre ensemble est un excellent moyen de gérer l'état et de changer les effets des choses. Allons-y ensuite. 7. Introduction aux accroches et à useState: Parlons maintenant des crochets et ensuite nous allons nous plonger dans notre premier état américain pris. Expliquez quelques choses , puis nous allons jeter un coup d'œil à un code. Que sont les crochets ? Comme vous pouvez le voir ici, les hooks vous permettent d' utiliser des fonctionnalités trouvées dans des composants basés sur des classes. Nous pouvons maintenant les utiliser à l'intérieur de composants fonctionnels, et ce sont des composants fonctionnels que nous utiliserons dans ce cours. Ces fonctionnalités incluent une logique avec état. Cela signifie donc que vous pouvez ajouter des états à chaque composant de manière totalement indépendante et réutilisés d'un composant à l'autre. Pour moi, en utilisant des crochets dans des composants fonctionnels, le code semble être beaucoup plus court, plus simple et plus net, alors qu'il possède toutes les fonctionnalités que l' on toutes les fonctionnalités que trouve dans les composants basés sur des classes. Parce que le code est plus court ? Ou pensez-vous que les crochets ont une courbe d'apprentissage moins profonde l'équivalent dans les classes, ce qui est génial lorsque vous apprenez ce genre de choses pour la première fois dans React. Les crochets n'ont été ajoutés que dans React 16.8. Donc oui, une sorte de nouveauté dans la vie de React. Un conseil rapide. N'utilisez pas de crochets à l'intérieur des boucles intérieures dans des conditions ou des fonctions imbriquées. Il vous suffit d'appeler des crochets au niveau supérieur de votre composant. Comme un peu touché. Et les hooks évitent une grande partie de la surcharge requise par les classes, comme la création d'instances de classe, comme la liaison d'événements et la création d'un constructeur. Maintenant, si cela n'a pas de sens et que c'est tout à fait correct, nous allons maintenant afficher du code. Je vais donc tout d'abord créer un composant basé sur les classes, et je vais créer ce compteur. Ainsi, lorsque vous appuyez sur un bouton, augmentez le nombre affiché à l'écran d'un. Ensuite, nous allons créer un composant fonctionnel à l'aide du crochet de l'État américain pour obtenir l'équivalent. Ensuite, vous pouvez voir une comparaison avec la quantité de code et la différence code pour obtenir la même chose à l'aide du crochet US State. Voici à quoi ressemble un composant de base basé sur une classe. Nous allons simplement créer une fonction d'état simple. Ainsi, lorsque vous cliquez sur ce bouton, il en ajoute 12. Eh bien, Amazon est là pour le moment, mais je vais vous montrer à quoi ça ressemble dans une seconde. Avec des cours. Il faut d'abord importer le composant, utiliser le mot-clé de classe, le nom de notre composant, et nous devons étendre le composant. C'est donc déjà plus long que la première ligne d'un composant fonctionnel. Si nous mettons à jour l'état, nous devons inclure un constructeur et un super. Ensuite, pour définir l'état, disons chaque numéro par défaut, nous devrions utiliser le, ce mot-clé, cet état est égal. Ensuite, un objet que nous pouvons appeler notre variable, disons count, et nous allons définir cette valeur par défaut à 0. Nous aurions besoin d'une fonction pour incrémenter le nombre. Appelons ça l'incrément. Ensuite, pour redéfinir l'état, nous devons utiliser ce mot-clé et nous utiliserons cet état défini. Cela modifiera donc la valeur à l'intérieur d'un objet. Notre variable de nombre devrait être mise à jour vers cet état de points, nombre de points plus un. Nous prenons donc la valeur d'origine et la mettons à jour d'une à chaque fois. Pour utiliser la fonction d'incrément sur le bouton, nous utilisons onclick. Ensuite, nous devons appeler ces incréments de points. Ensuite, pour que cette fonction d' incréments fonctionne, vous devez la lier également à l'intérieur du constructeur, ce qui est facilement oublié. Donc oui, cela est inclus ou nécessaire dans les composants basés sur les classes, vous feriez ce courant équivaut à ces incréments de points, point de liaison par point ceci. Lorsque vous apprenez pour la première fois des choses comme celle-ci, en particulier dans les composants basés sur des classes, c'est assez déroutant. Il y a beaucoup de choses à prendre ici. Et il n'est pas tout de suite logique pourquoi cela est nécessaire. Mais c'est le cas. Encore une fois, je vais vous montrer en quoi cela diffère à l'intérieur d'un composant fonctionnel à l'aide de crochets. Et puis pour afficher un nombre, le nombre est maintenant ce nombre de points d'état de points. Sauvons simplement que ce numéro est maintenant un à un. On y va. Il change l'état à chaque fois. Bon, il y a beaucoup de choses incluses, environ 20 lignes de code. Jetons maintenant un coup d' œil à notre crochet. Ce que je vais faire, c'est que je commenterai la classe et je commenterai dans le crochet. Bon, le numéro est vide de neuf minutes. D'accord, alors comment obtenir le résultat équivalent à l'intérieur du composant de base fonctionnel à l'aide du crochet US State. Tout d'abord, nous devons importer un État américain. Troisième de React. devez importer votre état comme celui-ci. Et à quoi ressemble l'état d' utilisation ? Au départ, nous aurions besoin de déclarer une constante, ce qui équivaudrait à votre état amené au-dessus. Ensuite, à l'intérieur des parenthèses se trouve notre valeur par défaut, qui est 0. Nous le savons donc. Et puis que se passe-t-il avant les égaux. Comme je l'ai dit, c'est un const. Ensuite, nous devons détruire ce que vous dites nous donne. Il y a deux paramètres que nous devons inclure. En fait, il dit qu'il a frappé. Il s'attend à ce qu'une valeur ou un retour à valeur avec état et qu'une fonction la mette à jour. Ce sont donc les deux choses. La valeur s'appelle count, nous pouvons appeler cela comme nous voulons. Et puis une fonction pour mettre à jour cela. Habituellement, la syntaxe conventionnelle de cette fonction est le jeu de mots , puis le nom de la variable, ou dans CamelCase dans ce courant, dans ce cas, il est défini comme ça. Vous ne pouvez pas compter l'état actuel, utiliser l'état. Dans notre bouton, nous avons besoin que la fonction incrémente ou onclick, au moins onclick est égale. Ce que nous devons faire, c'est d'utiliser une fonction flèche. Chaque fois que vous cliquez dessus, cela déclenche la fonction et nous pouvons simplement utiliser set current ici. Donc, définissez le nombre. Nous pouvons compter plus un. Le nombre est maintenant à jour. Nous n'avons pas besoin d'utiliser le, ce mot-clé partout où nous pouvons sauter la référence actuelle. n'y a pas de liaison de la fonction. Nous pouvons tout simplement faire tout cela en ligne. Donc théoriquement, appuyer sur l'un met à jour le numéro sans mettre à jour la page. Et regardez à quel point cela est plus net que notre classe de composants basée sur la classe. Nous devons inclure des comparatifs. n'est pas nécessaire. Le nom de la fonction est beaucoup plus simple. Nous n'étendons pas React, nous n'étendons pas le composant. n'y a pas d'utilisation de constructeur ici ou super. Nous n'avons pas eu à lier la fonction. Nous utilisons juste une ligne de vous. Cette fonction supplémentaire n'est pas nécessaire. Nous n'avons pas besoin d'utiliser le mot clé ici. Nous pouvons simplement faire référence au nombre comme nous l'avons fait ici. Vous pouvez voir comment nous avons économisé autant de codage ici, utilisant simplement le crochet de l'État américain. Ok, donc nous utiliserons l' État américain dans notre application actuelle, mais nous y arriverons bientôt. Examinons simplement un autre crochet utile, mais nous utiliserons l' effet utilisateur refroidi dans la prochaine leçon. 8. useEffect accroche: L'effet américain Hooke. Mesdames et Messieurs, nous utiliserons l'effet américain Hooke dans notre application. Nous avons l'habitude de récupérer nos données locales, sorte que notre gamme de devis et notre facilité. En fait, Herc est excellent pour cela car il vous permet d'effectuer des effets secondaires au sein des composants et c'est un effet secondaire. Il s'agit donc de récupérer des données, comme la configuration d'un abonnement et la modification manuelle du DOM dans les composants React. Examinons maintenant un peu de code pour que je puisse vous montrer quelques exemples pratiques de l'utilisation du crochet d'effet. Ok, donc c'est une application très grossière. Ce que cela va faire, c'est que nous allons mettre à jour le titre ici de l'onglet. Lorsque vous cliquez sur le bouton, le numéro apparaîtra dans le titre et le titre du document. Et cela ne peut se produire qu' après que tout soit chargé, après que le comparatif ait pensé. Cela ne peut pas être fait tout de suite car nous accédons au document. Est-ce que nous utilisons un effet si similaire à l'état américain, nous pouvons l'apporter en apparence d' effet important dans ces accolades bouclées. À quoi ressemble l' effet abeilles ? Vous pouvez écrire ces effets. Ensuite, nous ouvrons quelques parenthèses , puis nous vidons les parenthèses pour l'instant. Ensuite, nous allons simplement utiliser une fonction de tableau et ouvrir avec des accolades bouclées. D'accord, j'ai donc dit que nous voulions mettre à jour le titre du document une fois que le titre de mon point de document est égal à tout , puis nous allons changer puis nous allons changer le message par un message comme cliqué. Ensuite, nous allons simplement interpeller le courant. Donc, en utilisant l'état américain, que je vous ai montré dans une leçon précédente, pour mettre à jour le compteur par un. Vous avez cliqué sur Count , mais la valeur par défaut est 0. Vous pouvez voir qu'il est mis à jour sur le sujet cliqué 0 fois. Ensuite, en théorie, si on appuie sur Incrément, on voit ce nombre changer là-haut. Maintenant, cela ne fonctionnerait pas en dehors de l'effet américain Hooke. Et c'est parce que, comme je l'ai dit, c'est un effet secondaire. Ce que nous faisons ici, c'est que nous mettons à jour le document. Nous devons attendre que tout se charge avant que cela ne se produise. Maintenant, nous pouvons passer un deuxième paramètre ici, qui sera des crochets. Ce que cela indique au composant est fondamentalement comme ceci. Par défaut, cet effet secondaire d'effet d'utilisation s'exécute à la fois après le premier rendu et après chaque autre mise à jour après un rendu sur la page. Je n'ai donc pas compris que les crochets signifient que cela ne se produira qu'une seule fois. Dans cet exemple, ce n'est pas vraiment utile car nous pouvons voir que je suspends des incréments. Il ne se met plus à jour à aucun moment, car tout ce que je dis c'est d'obtenir ces informations une fois et plus jamais. scénario dans lequel cela est utile est lorsque vous récupérez des données externes ou des données qui vous montreront un exemple très prochainement. Dans ce scénario, vous vouliez simplement recueillir des informations la seule fois où tout s'écroule. Mais ici, nous voulons le mettre à jour plusieurs fois. Nous pouvons réellement spécifier quand nous voulons que cela soit rendu ou modifié. Je vais mettre chaque fois que ça compte les changements. Cela va ignorer toute autre fois que la page sera rendue, mais seulement si les mises à jour comptent, procédez à cette théorie. Si j'appuie sur Incrément maintenant, il est à nouveau mis à jour parce qu' il reconnaît que le nombre change. Qu'en est-il des données externes ? Donc, si nous voulions obtenir des données à partir d'une API ou effets entrent en jeu , alors il s'agit d'un composant de données externe get. Ici, nous ne faisons que lister l'art des choses à faire. Il s'agit donc simplement d'une zone de texte d' espace réservé. Ces informations proviennent de cette API externe. Vous pouvez voir ici, avec notre État américain, c'est un tas de choses à faire. La valeur initiale par défaut n' est donc qu'un tableau vide. Désolé, au départ, nous n'avons pas les données, mais nous savons qu'il s'agira d'un tableau de tâches ou d'un tableau de texte. Donc, dans notre effet utilisateur, ici, nous ne faisons que récupérer les données et c' est une fonction que j' appelle ici. Comme vous pouvez le voir, j' utilise le tableau vide. Cela se refroidit une fois sur le premier rendu car nous voulons seulement obtenir ces informations lorsque tout est bas, lorsque tout est monté, juste la seule fois que j' utilise asynchrone l'attend. Vous pouvez éventuellement utiliser ces données, à savoir Jason. Et puis quand nous avons la réponse, qui est une variable pivot ici, définissez les tâches à faire. Donc, notre État américain sera la réponse. La réponse est une charge d' informations à l'intérieur d'une baie. Et ça veut dire que c'est le cas. Maintenant, nous provoquons le mappage des réponses dans toutes les tâches, car il s'agit d'un tableau. Et puis, dans une balise de paragraphe, je ne fais que lister le titre de l'article. Cette variable ici peut être appelée tout ce que nous voulons. Nous pouvons l'appeler si nous voulons importer un article, alors j'accède simplement au titre de l'article et il affiche ces informations ici. Parce que ces informations, ces données peuvent être un fichier massif et massif, trouveront des centaines, des milliers et des milliers d'entrées, ce qui signifie qu'elles ne peuvent pas y accéder immédiatement. Nous devons tout attendre jusqu'au mont. Dans l'effet secondaire. Le chargement de ces données peut prendre une seconde . C'est pourquoi nous utilisons ces effets. Et quand il est prêt et qu'il aura accès à toutes les données que nous pouvons afficher. Il utilise Effect s'applique à notre application et à nos données. Où je vais vous montrer que dans la prochaine leçon, lorsque nous commencerons à brancher tous nos crochets et à utiliser nos données. Nous utiliserons donc l' état américain et vous utiliserez l'effet dans notre application dans la prochaine leçon. 9. Les données et les accroches nos... hooks: Nous avons maintenant appris les bases des crochets. Utilisons réellement l'état américain et utilisons l'effet et travaillons avec nos données de devis réelles ici. La première chose que je vais faire est donc de déplacer ces données vers un fichier de données. Nous avons créé ce répertoire de données à l'intérieur des données source qui ne fait que créer un fichier data dot js. S'il vous plaît, suivez-moi si vous le pouvez. Je vais copier ces données arrivées. Voyez si cela se brise réellement parce que les données ne sont pas définies, collez-les ici. Et n'oublions pas d'exporter les données au format lui-même. OK, c'est exporté. Nous avons juste besoin d'importer la date et j'importe, n'oubliez pas les accolades bouclées. Données provenant de données obliques. Les données slash fonctionnent très bien dans leur propre fichier, ce qui est donc plus facile à entretenir. Encore une fois, s'il s'agissait d'un, 100 lignes ou plus que ce qu'il serait plus logique de l'avoir dans ses propres données, un fichier. Pour le moment, nous ne faisons que coder en dur dans la première citation de notre tableau. Et nous le faisons en passant des guillemets datés de balises pour le composant de devis ouvert, vous pouvez voir les données, puis la première est 0, et c'est la première citation. Mais nous aimerions modifier cela lorsque vous cliquez sur le bouton. mettrons à jour l'état, ce qui signifie que nous devons mettre en service l'état, un nouvel état. Et puis vous pouvez voir qu' il est dit que vous indiquez un extrait de code, je vais juste appuyer sur Tab et remplis presque ce dont nous avons besoin. Donc je vais appeler cette citation, puis fixer une citation, qui doit être CamelCase. Ce que nous pouvons faire, l'équivalent de coder en dur le premier de la baie, c'est simplement faire des données. Alors l'état 0 n'est pas défini parce que je n'ai pas d'importance ici, à Fort, directement de React. Super. Et alors, ce que nous devons faire c'est plutôt que de passer le temps, toutes les données, il suffit de transmettre le devis, devis est déclaré ici et de les transmettre ici. Faisons une rupture parce que l'intérieur est assez compétitif. La tarification de toutes les données par rapport à cette situation doit changer. Pour citer, ça ne vaut pas le quart. Notez que nous appelons les données comme mes erreurs. J'ai changé ces octets de données, mais nous n'avons plus besoin ce tableau soit supprimé de la citation et du nom. On y va. D'accord ? Si je devais changer cette valeur par défaut en une, alors c'est idéal. D'autres citations, Judy Smith, si nous arrivons à nos données, alors oui, c'est la bonne. Le suivant dans la baie codée en dur, c'est notre citation par défaut. Mais ensuite, sur le bouton, bien sûr, nous voulons cliquer sur le bouton. Il suffit d'utiliser cette guillemets pour modifier la valeur. Pour l'instant, nous allons simplement coder en dur une valeur comme disons aux données, à la suivante du tableau. Donc, en théorie, cela devrait changer cela pour moi. Appuyez sur Générer. On y va. Cela sera toujours soutenu. Troisième du tableau car c'est ce que nous avons défini ici. Ce que nous devons vraiment faire, c'est randomiser ce nombre ici, car l'idée est que vous appuyez sur Générer et qu'il choisit déjà une citation aléatoire à partir de nos données. Nous allons donc trouver un nombre aléatoire. Mettons ça dans un const et on va juste appeler ça un numéro aléatoire. En utilisant simplement JavaScript standard, nous devons utiliser un point mathématique aléatoire, qui choisit un nombre aléatoire entre 01, donc 0.10.2, etc. Mais nous devons le multiplier par la longueur des données. Nous avons donc cinq citations ici. Nous pouvons effectuer la longueur des points de données. Cela signifie que même si nous nous retrouvons 100 de plus et que nous continuons d'y ajouter , la longueur des points de données sera toujours la longueur de nos données. Parce que nous ne voulons pas seulement une décimale, nous voulons qu'il s'agisse d'un nombre entier. Nous devons ajouter un plancher de points mathématiques. D'accord ? C'est notre théorie des nombres aléatoires. Nous venons de consigner un numéro aléatoire. Et examinons simplement ce qui se passe dans la console. Nous recevons 23340144. Nous avons des numéros aléatoires ici. Maintenant, nous expliquons et bientôt pourquoi cela se produit deux fois parce que nous ne voulons que cela se produise. Et puis ce que nous devons faire c'est plutôt que de coder cela en dur, nous devons randomiser le numéro OnClick. Créons donc une fonction aléatoire. Nous appellerons randomiser. Je vais juste être une fonction de flèche. La fonction allait simplement utiliser la guillemets. Vous indiquez ici des valeurs où vous saisirez les données. Mais au lieu d' un numéro codé en dur, nous utilisons ici un numéro aléatoire. Ensuite, au lieu d' appeler un modèle de guillemets, nous pouvons simplement utiliser le randomize comme ceci. Voyons ce qui se passe. Pourquoi cela ne change-t-il pas ? Bien sûr, nous devons utiliser l'effet américain. Apporter votre effet d'utilisation ici. Il suffit de supprimer certaines de ces valeurs. Supprimez la valeur entre crochets. Nous allons donc laisser cela vide car nous voulons simplement obtenir les données. Le premier chargement. Ce que nous allons faire, c'est appeler un effet d'utilisation interne aléatoire. Vous avez maintenant un problème ? Lorsque je clique sur Générer, les guillemets ne sont pas continuellement renseignés. La raison est que lorsque nous définissons notre numéro aléatoire ici n'arrive que ceux. Bien sûr, nous voulons obtenir un devis aléatoire. Chaque fois que quelque chose change sur la page, ils sont en premier chargement lorsque tout est grandeur et onclick randomise obtenir la cause devient froid et utilise un vecteur qui est correct, mais nous il suffit d'obtenir ce numéro rond à chaque clic et après chaque théorie de l' ordre du jour, on chaque théorie obtient les différentes citations. Excellent. Et une chose qu'il est utile de faire est que s'il s' agissait d'un énorme fichier de données contenant des milliers d'entrées, peut prendre un peu de temps lorsque vous chargez la page pour chargement peut prendre un peu de temps lorsque vous chargez la page pour la première fois. Il est donc utile d' avoir une sorte de chargement de texte et de chargement de fichier vous utilisez pour indiquer à l'utilisateur que les données arrivent. Effectuez principalement ce que nous faisons ici car il existe des données normalisées avec lesquelles travailler. Lorsque vous travaillez avec des applications plus volumineuses. C'est utile à savoir. Nous pouvons également le faire avec vous. Donc, ici, nous allons simplement créer l'extrait de données américain et nous nous souviendrons que ce chargement est en cours de chargement, puis le set charge la majuscule I. Et ensuite nous allons définir cette valeur sur true. Parce que cela sera vrai au départ lorsqu'il essaye d'obtenir les données. Il chargera les données lorsque vous chargerez ces données pour la première fois, mais quand elles auront les données et que nous pouvons dire qu'elles sont rechargées , mais quand elles auront les données et que nous pouvons à false parce que les données ont été reçues. Mais que faisons-nous avec cela, c'est la valeur de chargement. Eh bien, nous pouvons l'utiliser comme condition pour afficher ou masquer certains textes ou contenus. C'est un booléen à vrai. Ensuite, nous avons défini la valeur false lorsqu'elle reçoit les données. Nous ne voulons donc pas afficher ce devis tant que le chargement n'est pas terminé. Sous le H1. Pour utiliser du JavaScript, nous venons d'ouvrir quelques accolades bouclées. Ensuite, nous pouvons le faire, c'est le chargement. Donc, si c'est vrai , que devons-nous faire ? Montrons un paragraphe qui dit citation, chargement. C'est très bien pour l'instant. Sinon, si ce n'est pas vrai, si c'est faux et que l'apprentissage est terminé. C'est là que nous voulons cette citation qui peut rester ici. Même si j'actualise cette page, vous ne verrez pas cela parce que c'est si rapide. Réglons le chargement à false ici, point d'exclamation. Rafraîchissez la page et vous pouvez voir qu'elle dit citer maintenant apprentissage, donc c'est à quoi cela ressemblerait pour inverser cela. Là, nous avons essentiellement notre configuration de crochet. Nous utilisons un nouvel état pour définir un devis, pour définir s'il est en cours de chargement. Nous utilisons essentiellement l' effet utilisateur pour l'effet secondaire, où obtenons-nous un nombre aléatoire puis le définissons sur les données. Tout cela se produit une fois que tout est chargé sur la page. Nous pouvons ensuite utiliser le chargement conditionnel pour afficher et masquer différents contenus. En transmettant notre devis à notre composant de devis, OnClick, nous classons aléatoirement le numéro aléatoire et nous allons aléatoirement le devis pour obtenir ces données qui se trouvent dans son fichier séparé. Cela aura du sens, beau et soigné, en utilisant simplement les crochets de symboles. Et en fait, parce que nous utilisons ce fait utilisateur, nous pouvons supprimer cette valeur par défaut car un effet énorme sur le nœud est déjà aléatoire. Tous les types de notes qui apportent une nouvelle citation, Great. 10. Essais: Essais, tests 123. Bon, voici ce que nous allons faire. Nous avons maintenant terminé la partie React du travail. Nous pouvons tester les données, tester nos composants. Et la meilleure façon de le faire est d' accéder à la boutique en ligne oblique accéder à la Chrome.Google.com et rechercher les outils de développement React. s'agit des outils de développement officiels car ils sont proposés par Meta, qui est le nouveau Facebook, qui fait réagir si vous ne le saviez pas. Vous pouvez voir que j'ai déjà téléchargé ceci sur mon chrome parce qu'il est dit supprimé de la croissance, mais oui, assurez-vous de l'obtenir. Ce que cela vous donne. Laissez-moi juste fermer ça. Je vais vous montrer comment vous en avez deux. Et tu y arrives. Nous sommes sur une application avant votre heure d'inspection. Ouvrez vos outils de développement normaux là où vous connaissez probablement. Et puis vous pouvez voir ces nouveaux onglets, adversaires sakés et le profil. Cliquez sur Composants. Et il est notre application. Nous avons donc notre application, qui est notre composant parent. Et en gros, vous pouvez voir la hiérarchie, Monsieur. Vous pouvez voir que l'application comporte composants enfants, un devis et un pied de page. Cliquez dessus, mettez-le également en surbrillance sur le frontal. Et c'est également génial si nous passons à un devis, que nous connaissons sur notre composant actuel, nous transmettons les données de devis. Vous voyez Helix, c'est peut-être de l'autre côté. Nous avons des accessoires. Nous pouvons voir l' approximativement transmis à ce composant principal. Et ce sont en effet des données que nous avons un nom et que nous avons obtenu un devis. Si nous les mettons à jour, générons, puis mises à jour en temps réel, vous pouvez voir comment cela a changé. Nous pouvons même tester notre proxy pour pouvoir écrire tout ce que je veux. Et on y va. Il est mis à jour sur le front-end. Je dois le faire. Nous pouvons également voir qu'il y a l'état que nous déclarons dans notre composant d'application parent, qui est en effet cela a été réalisé orthographié exceptionnellement mauvaises plantes, pas très exceptionnelles de ma part. Ignorez cela, s'il vous plaît Nous avons notre état ici. Nous avons également un deuxième état. C'est donc notre état de chargement. Il est actuellement défini sur False. Si je devais cocher ça, il y a une case à cocher à droite ici. Vous pouvez voir dans notre devis en cours de chargement. C'est donc un bon moyen de tester les éléments que vous pouvez interagir avec vos données réelles et vos invites ici, en activant et en désactivant cela. Et vous pouvez alors voir également dans la hiérarchie hit masque le composant principal, ce qu'il doit faire lors du chargement est défini sur true. Il s'avère que le faux est de retour. Autre chose à montrer rapidement, cela ne fait pas partie des outils réactifs. Si nous passons aux éléments, nous pouvons voir que le pied de page a une classe de Pied de page. N'oubliez pas que la classe est un mot-clé réservé dans Reacts. Si je vais simplement dans mon code, vous verrez que dans le pied de page, nous utilisons correctement le nom de classe. Et puis cela montre simplement qu'il est compiler le mot de classe correct ici, ce qui est bon à savoir. Donc, lorsque vous jouez avec l'application URN, oui, téléchargez définitivement ceci et faites un clic et voyez quelles données vous transmettez. De plus, c'est un bon moyen de déboguer votre main si vous n'obtenez pas les données, si vous ne recevez pas les bons accessoires, si l'état n'est pas correct , c'est le meilleur endroit pour voir ce qui ne va pas et où vous pourriez avoir besoin de réparer quelque chose. 11. Ajouter des styles: C'est vrai ? Eh bien, mais plus ou moins fini avec la partie React de ce cours, qui est la chose la plus importante. Dans cette leçon, je vais juste ajouter quelques styles qui dépend complètement de vous si vous voulez suivre ou regarder cette leçon, je vais littéralement ajouter quelques styles CSS. Mais si vous êtes heureux d'ajouter le vôtre et que vous n' avez pas besoin de suivre. N'hésitez pas à sauter cette leçon, n'est-ce pas ? Quoi qu'il en soit, pour ceux qui se trouvent dans notre répertoire styles , dans la source, je vais juste créer un fichier styles.css. Allons-y. Dans le corps. Je vais juste créer une belle famille de polices. Allons chercher quelque chose comme Gilroy aimait cette famille de polices. Nous allons simplement faire Helvetica sans empattement pour finir ça. Ce que nous pouvons faire, c'est dans App, importons des styles slash slash styles.css, lui après les styles. OK. Créons quelques styles pour la page. Nous n'avons pas encore créé ce cours. Nous devons ajouter cela à notre balisage. Mais pour l'instant, ajoutons simplement peu de style pour choisir un joli fond vert, 70 av. J.-C., oui, y rien. Revenons ensuite à notre application. Ajoutons le nom de notre classe à notre section. N'oubliez pas son nom de classe et non sa classe. Page K Il y a notre vert. Je vais changer le nom de cette classe de l'application en conteneur. Et alors, que devrions-nous changer d'autre ? Notre texte est en train de charger, nous pouvons le caler en ajoutant un nom de classe. Tout simplement apprendre est très bien. Notre citation, et mettons cela sur une nouvelle ligne pour que nous puissions voir cela un peu mieux. Je vais vraiment emballer cette citation dans un nom de classe div de conteneur de quart. Il suffit de courir le fait. Notre pied de page regardait à travers le nom de fertile, c'est très bien. Alors, que diriez-vous de notre comparateur queer ? A bloqué un paragraphe de mot pour le nom. Ajoutons en fait un nom de classe. Nom ici. ce point, je vous encourage à avoir un désordre avec l'Oregon College et nous avons déjà des fonds et que cette application vous appartient à votre style, à la manière de David. C'est donc légèrement différent. Le mien. À l'intérieur de la page, je veux que tout soit empilé l'un sur l' autre juste pour m'assurer que cela se passe. Je vais régler l'affichage sur Flex côte à côte, mais ensuite nous pourrons mieux changer de direction en colonne. Et puis je réglerai la hauteur à 100 % de la hauteur de vue, ok, vert partout, exactement ce que je veux. Ensuite, que devrions-nous regarder ? Nous avons un conteneur. Un conteneur. Nous allons également faire ce flex d'affichage. Et encore une fois, mettons ceci dans une colonne, colonne de direction flexible. Je veux mettre tout au centre de contenu centré et justifié. Ensuite, la hauteur du conteneur. Faisons juste 95 hauteur de vue. Maintenant, au centre. Assurez-vous de l'envoyer correctement avec la marge 0, le haut et le bas ou deux au milieu. Ça a l'air bien. Nous allons faire une largeur maximale de 1200 pixels uniquement pour les écrans plus grands. Alors fixons une largeur de 80 % parce que je ne voulais pas aller jusqu'au bout. On y va. C'est Check. On y va. Vous pouvez voir que la largeur maximale fonctionne bien là. Examinons notre en-tête H1. H1. Je vais faire de cela un vert légèrement foncé, donc un hachage 2676. Faisons une taille de police de 5050 pixels et assez grande. Margin zéros 0100 sélectionne un peu d'espace en bas. C'est ainsi que notre devis contient un x. Je veux ajouter un peu de marge. 50 pixels inférieurs de gestion. La citation elle-même blockquote, centrée. Nous allons nous assurer qu'il est blanc. Donc, hachez FFF, style police pour le rendre italique. J'espère que vous verrez à quel point cela est utile pour que cela soit mis à jour en temps réel. Nous pouvons donc, en temps réel, affecter les styles et les voir fonctionner et à quoi il ressemble, ce qui est vraiment pratique. Margin et nous allons déplacer ça. Imaginez des zéros à gauche. Nous allons faire une taille de police de 90 pixels. Beau et grand. Énorme, mais j'aime beaucoup. Très bien, donc le nom en bas, Joe Bloggs, nom de classe. Je vais définir la couleur pour hacher CA 755 C. Oui, une bonne sorte de couleur orangée. Presque comme si j'avais préparé ces couleurs à l'avance. Incroyable. Taille de police jusqu'à 20 pixels. façon de le rendre audacieux ou 800. Soyez bien. En fait, je vais transformer le texte en majuscules. Oui, Nice. Ok, on se rapproche. Ensuite, jetez un coup d'œil au bouton. Couleur de fond. Je vais le régler sur un 267 vert foncé, une bordure. Débarrassez-vous de 0. Couleur du texte et rendez-le blanc. Assurez-vous que le curseur est pointeur lorsque vous le survolez. Joli. Famille de polices pour le bouton. En fait, volons ou vous avez ici poids de police, audacieux, 800. La largeur est trop grande, il s'agit donc d'une largeur maximale. 150 pixels. Besoin d'un rembourrage de 5015 pixels autour des interstices et bien, et nous ferons de la transformation du texte. Majuscules. Joli. Tout comme pour ajouter un état de survol à ce bouton, survol des deux-points. Je vais changer la couleur d'arrière-plan pour qu'elle soit blanche. Et nous allons changer la couleur du texte pour qu'elle devienne vert foncé. En gros, il suffit de tout inverser à 66 F. l'air sympa. Je pense que nous avons juste le pied de page en bas ici. Je n'ai pas vraiment ajouté de classe de pied de page à cela. Utilisons cette classe de pied de page. Couleur du texte. Faisons en sorte que ça soit gris. Oui, c'est très bien. Et nous veillerons à ce que l' alignement du texte soit centré. Oui, c'est très bien. Cela permettra de rechercher notre texte de chargement. Laissez-moi simplement aller à l'application. Ce que nous allons faire, c'est que nous allons apprendre à faux. Voici un point d'exclamation, chargement coordonné et voyez, mon paragraphe a le nom de la toux du chargement. Passons donc aux styles. Il n'est certainement pas nécessaire d'être à Francine. Apprendre constamment la couleur peut être blanche. Et nous allons simplement faire une police plus grande de six pixels profonds ici. Tout à fait très bien. Il suffit d'inverser le dos. Économisez. C'est plutôt décent. Oui, joli. C'est notre générateur de code. Joli et simple. Mais je travaille, ça a l'air plutôt bien. 12. Déployer votre travail: Il est maintenant temps de déployer votre fantastique application, mais vous venez de la créer pour que le monde entier puisse la voir. Et je vais maintenant vous montrer à quel point il est facile d'utiliser Netlify. Netlify est une équipe formidable et dispose d'un excellent service dans divers outils de création et de déploiement d'applications. Oui, j'ai beaucoup de fonctionnalités, y compris l' analyse et les tests fractionnés. Le déploiement est vraiment génial. C'est pourquoi nous utiliserons service de déploiement Netlify pour déployer votre application. Nous allons faire tout ça à l'intérieur du terminal ici. Ouvrez votre terminal. À l'intérieur de votre application. Assurez-vous de créer une application prête pour la production. Pour ce faire, nous allons simplement exécuter npm run build. Comme il est dit dans le terminal, créer une production optimisée. Cela va donc compiler tous nos fichiers dans ces fichiers de très petite taille , ce qui est génial. Et si nous examinons notre structure de dossiers, nous avons maintenant un dossier Build. Et c'est exactement ce qui va être téléchargé. Donc, essentiellement, il a créé un fichier HTML d'index avec tout notre travail. Il existe également un dossier statique avec nos styles et JavaScript. C'est prêt pour la production, construisez notre application. Il suffit de cliquer une fois sur l'écran. Ensuite, nous avons juste besoin d' installer npm, installer le client Netlify, qui est Netlify Space CLI, et nous allons faire de l'espace dash g. Il est donc installé dans le monde entier. Si vous rencontrez des zones d'autorisation comme moi, écrivez le tout à nouveau, mais mettez sudo au premier plan. Cela nous permet à l'administrateur d'installer le client Netlify. Sudo n'installez pas Netlify. Cli, espace dash g. Nous avons installé le client Netlify. Disons que c'était dans le terminal et puis c'est juste un cas d'écriture Netlify espace, déployer. Appuyez sur Entrée. Assurez-vous que je l'épele correctement. Il manque un T là-bas. Ensuite, je l'ai mal orthographié à nouveau. Net Lift Phi. Déploiement. Encore une fois pour avoir les zones d'autorisation faites de même avec le sudo à l'avant. Netlify. Ne notifiez pas le déploiement. Ensuite, cela ouvrira une page qui ressemble ceci et vous devez vous connecter à Netlify. Vous pouvez l'utiliser en fonction de ce que vous possédez, soit GitHub ou Bitbucket, ou vous pouvez simplement utiliser votre e-mail. Je vais me connecter avec mon GitHub. Déjà peuplé pour moi. Nous venons de vous connecter. Nous avons une authentification à deux facteurs. Laissez-moi juste régler ça. Ensuite, nous allons autoriser Netlify. Encore une fois, nous ne faisons que franchir les étapes de sécurité, autorisez. Nous venons de retourner à notre terminal. Je vais sélectionner ces deux oxygènes. Je vais sélectionner Creighton, oublier un nouveau nom de site comme facultatif. Passons juste à la pige, indéfinis. Ensuite, il me demande quel répertoire publier. Eh bien, c'est notre dossier Build. Je vais juste écrire Build ici. Il y a un déploiement de notre travail, suffit d'attendre que le Go Live soit assez rapide et le déploiement est en direct. En théorie. Cette URL qui a été fournie dans notre terminal. Nous y allons ce soir-là. C'est notre application. Travailler comme prévu. Tout cela est gratuit et nous avons pu le déployer assez rapidement. J'espère que tous ces trucs terminaux avaient du sens. C'est ainsi que vous pouvez déployer du travail sur Netlify et c'est gratuit, ce qui est génial. Pour suivre ces étapes, suivez les instructions du terminal. Assurez-vous de créer un dossier qui est la cible que vous devez demander à Netlify de consulter. Ensuite, en tant que générateur de devis final à l'URL fournie dans le terminal. Maintenant, je le recommande si vous êtes arrivé à ce stade et que tout est réussi et que vous avez un lien à partager. Assurez-vous de partager votre travail sur Skillshare. Ou vous pouvez également inclure une belle capture d'écran si vous le souhaitez. Ce serait génial de partager votre URL. Pour que moi-même et les autres élèves puissent voir votre travail incroyable et je n'ai pas reçu de commentaires. Et pendant ce temps, pourquoi ne pas jeter un coup d'œil au travail de l'autre étudiant ? Un joli. Vous venez terminer la création d'un générateur de devis ou n'avez pas réagi et vous avez également été déployé sur le Web. Bien joué. 13. Et après ?: On peut dire que vous avez créé votre application, que vous avez appris les fondamentaux de React. Vous êtes génial, mais comment devenir plus génial chez React ? Eh bien, ce ne sont que quelques suggestions de ma part savoir où vous pouvez aller ensuite si vous vouliez lire plus loin, mais en ce qui concerne la réaction et ensuite c'est plus intermédiaire, Ce que je pense que vous devriez faire est de jeter un coup d' œil à d'autres crochets. Il y a plus de crochets autres que ceux que vous indiquez dans l'effet d'utilisation. voici quelques uns. Utilisez href et utilisez le contexte. Nous en arriverons dans une seconde et beaucoup d'autres. Jetez donc un coup d'œil à la documentation React. Ensuite, j'ai répertorié le routeur React parce qu'il serait génial pour vous de savoir, comprendre comment vous pouvez travailler avec d'autres pages. Nous venons donc de créer une application d'une seule page. Que se passe-t-il si vous avez d'autres pages pour vous familiariser avec le système de routine, alors vous pouvez utiliser certains frameworks. Ensuite, JS est un framework React très populaire et dispose de fonctionnalités très pratiques pour simplifier votre processus et optimiser votre application React. D'autres crochets utilisent ref que j'ai mentionné, et c'est un excellent moyen d'accéder aux éléments DOM. Dans cet exemple, nous avons utilisé href ici. Au départ, c'est nul. Nous l'avons ajouté à une constante appelée élément d'entrée. Et sur l'entrée elle-même, nous utilisons REF pour l'élément d'entrée. Cet élément d'entrée est donc désormais référencé. Donc, lorsque nous cliquons sur le bouton, sur le bouton cliquez ici, c' est la fonction. Nous avons l'élément point d'entrée, le courant sombre de référence, la mise au point sombre. Nous mettons donc l'accent sur cet élément. Nous avons accédé à cet élément DOM avec use ref, use context. Ainsi, comme je l'ai écrit ici, il est utilisé pour créer des données communes accessibles dans toute la hiérarchie des composants car c'est la chose la plus importante sans passer. la paroxétine manuellement à chaque niveau. Imaginez que vous ayez des enfants à cinq niveaux plus bas. Donc, lorsque notre application, notre application, désolée, nous avions un parent et deux enfants à un niveau inférieur, mais imaginez s'il y a plus d'enfants, leurs petits-enfants, leurs arrière-petits-enfants, les niveaux continuent de baisser. Vous ne voulez pas continuer à passer l'école de prop jusqu'au bout. Je vais devenir assez ennuyeux. Vous pouvez utiliser, utiliser un contexte ou créer un contexte, le contexte au niveau parent. Ainsi, dans cet exemple, ils utilisent des thèmes, systèmes hey ou un système de couleurs pour la lumière et l'obscurité. Et ensuite, vous envelopperez l'application avec ce thème, fournisseur de contextes constants passant par vos valeurs , puis avec l'enfant. Cela peut donc être inférieur à n'importe quel niveau au lieu de passer les cultures jusqu' à l'intérieur de l'enfant, n'importe quel enfant, vous pouvez utiliser ce contexte. Nous avons choisi un thème appelé constant, puis vous avez simplement accès à ce contexte ou à ce contexte. Pensez au premier plan. Ce thème est accessible depuis le parent. J'ai mentionné le routage. Jetez un coup d'œil à la documentation officielle ici. L'URL n'est qu'un ensemble de composants de navigation pouvant être utilisés dans votre application. Alors jetez un coup d'œil à ceci si vous souhaitez travailler avec plusieurs pages dans vos frameworks d'applications, j'ai mentionné Next JS. Encore une fois, jetez un coup d'œil à l'orientation efficace du Dr. Il dispose de nombreuses fonctionnalités exceptionnelles, d'un rendu statique et côté serveur pour de bonnes performances, d'un regroupement intelligent, d'une prise en charge complète de TypeScript, pré-récupération grossière et d'un routage. est particulièrement comme dans le prochain et rend les choses si simples. C'est presque comme un système de glisser-déposer dans le sens où vous auriez un répertoire pour les pages et que vous le faites glisser, vous les comparerez ou les pages dans ce répertoire et cette source soit en vous enracinant plus ou moins. Oui, c'est sympa et facile. Il est également livré avec l'optimisation de l'image et de nombreuses autres fonctionnalités. Donc, une fois que vous avez la tête autour de vous réagit chaque année confortable, nouvelle génération x vaudrait la peine d' être regardée. 14. Résumé et raisons pour lesquelles vous êtes génial: Bien joué. Vous avez fait un excellent travail inscrivant dans ce cours et en créant votre propre générateur de devis en utilisant les dernières techniques que vous avez apprises. fonctionnalités certainement importantes de React, y compris JSX, accessoires, hooks, gestion de l'état et tests, citer que quelques-unes. Être un développeur frontal et avoir connaissance des fondamentaux modernes de React est un ensemble de compétences très utiles à posséder , quel que soit le niveau auquel vous vous trouvez, que ce soit le niveau junior, moyen ou senior. React est toujours la bibliothèque JavaScript la plus populaire au monde. Le fait que vous ayez créé une application React d'une seule page vous place en haut de l'espace de développement Web frontal. Félicitations à vous. Pouvez-vous maintenant prendre ces compétences et les utiliser dans votre futur travail ? Enfin, je voulais simplement dire un grand merci non seulement de vous être inscrit à ce cours, mais aussi de l'avoir terminé. Sans votre soutien, les enseignants comme moi ne seraient pas en mesure de créer de tels contenus. Donc vraiment, merci beaucoup. Si vous avez apprécié ce cours, et j'espère vraiment que vous l'avez fait, cela signifierait beaucoup pour moi si vous pouviez prendre le temps de laisser un avis. J'ai lu tous les commentaires que je reçois et je prends en compte tous les commentaires que vous pourriez laisser. Vous pouvez donc continuer à améliorer mes leçons et à rendre les cours que vous jugez utiles. Cela étant dit, merci encore une fois, vous êtes génial. La nuit va et codez.