Les bases de React.js - Créer une calculatrice super amusante !

1. Bonjour et bienvenue à React.js en matière de principes fondamentaux !: Tout le monde. Mon nom est Luke faddish et sur le développeur de logiciels professionnel j'ai écrit mon tout premier mâle HD en 1997 qui ressemble à ça. Pas vraiment. Mais aujourd'hui, je suis ici pour vous parler de la réaction des J si vous n'en avez pas entendu parler. React est une bibliothèque de scripts de travail utilisée pour construire des interfaces Web frontaux. Et ce qui est génial à propos de réagir, c'est qu'il supprime beaucoup de la complexité que nous faisons normalement face lorsque nous construisons une application Web, je vais m'en occuper plus tard pendant la classe. Mais pour l'instant, quelles minutes sait-il que les réacteurs deviennent si populaires que nous pouvons maintenant construire des applications de bureau et mobiles dans les réacteurs ? Eh bien, c'est pourquoi je suis super excité d'enseigner cette classe, qui est de réagir les fondamentaux de premier plan et les développeurs pendant cette classe, et nous allons construire cette calculatrice comme projet. Cela peut sembler assez simple, mais la grande chose à ce sujet est qu'il couvre tout ce que nous devons savoir pour pouvoir commencer à construire des applications Web réactives. Je suis super excité de commencer, et j'ai hâte de te voir à l'intérieur de la classe 2. Mettons en place et mettons en place.: tout le monde le fera. Bienvenue dans cette conférence, nous allons nous assurer que vous êtes en mesure d'exécuter une application de réaction dans votre navigateur. Maintenant, vous avez déjà lancé des applications de réaction dans votre navigateur ? Presque certainement. Parce que si vous exécutez Facebook, alors vous avez sans aucun doute lancé une application de réacteur avant Facebook inventé réacteur, et ils l'utilisent partout. Mais nous allons utiliser réagir un peu différemment à ces gars pendant nos exercices de développement et d'entraînement. Donc, il s'il vous plaît télécharger à partir des ressources recompter médecins complets ici. Je l'ai déjà assis dans ma petite fenêtre de fonder. Donnez-lui un double clic pour l'ouvrir. Vous pouvez le voir sur les compresses dans ces recomptage photo complète. Ouvre ça et à l'intérieur. Nous avons re Calcutta dot html. Maintenant, dans votre navigateur, vous pouvez aller de l'avant et ouvrir ce fichier comme cliquer sur Recompter cette HD et lancé comme ouvrir . En passant, vous pouvez utiliser la commande o sur un Mac ou le contrôle sur un PC afin d'ouvrir un loin de votre frère. Et ici, nous avons notre petite calculatrice. Et si nous faisons des maths difficiles, neuf divisé par trois. Hé, Todenhofer a fait quelque chose ou pas, parce que la réponse est trois de toute façon. C' est ça. C' est là. Ça marche à peu près comme on s'y attendait si ça ne marche pas. Ce que nous attendons à voir, c'est ceci. Rick dehors. Attendez, Offrez des chapeaux, tout le monde. C' est la calculatrice React et puis un gros rien de graisse blankness à côté de lui qui sera le plus probable parce que vous n'êtes pas connecté à Internet. Tout ça ne va pas avec votre connexion Internet. Je me suis retourné et je le démontre souvent. C' est parce que nous tirons dans certaines bibliothèques externes à utiliser sans application de réaction. Si vous ne pouvez pas voir Internet, vous ne pourrez pas utiliser l'application, et vous ne pourrez pas terminer le reste. Bien sûr, euh, l'autre raison la plus probable est que vous utiliseriez un très vieux navigateur si vous n'avez toujours pas de chance. Vous avez Internet sur. Tu as un nouveau navigateur ? Oh, oui, bien sûr. Assurez-vous que JavaScript est également activé, et que vous avez activé javascript, et que vous n'obtenez toujours rien. Hey, faites-le moi savoir et on s'occupera de ce qui se passe et de vous mettre en marche. Mais c'est tout pour l'instant. J' espère que vous avez vu une belle il ont été calculés dans votre navigateur, et je suis impatient de vous voir dans la prochaine conférence quand nous commençons à construire. 3. Commencez à créer le calculateur !: Bonjour encore, tout le monde. La conférence d'aujourd'hui est l'endroit où le caoutchouc rencontre la route et nous commençons à travailler sur notre calculatrice de recomptage . Donc, nous allons commencer comme cette calculatrice et l'implémenter. Et je veux juste dire que le but d'aujourd'hui est de voir à quoi ressemble la réaction. Donnez-lui une poignée dessus. Thompson React code dans un éditeur de texte. Jouez un peu avec ça. Il ne s'agit pas d'apprendre la théorie. Tout ce que nous faisons ici aujourd'hui, nous couvrirons ou plus tard devant les tribunaux. Donc, nous aurons d'autres conférences consacrées, comme quels composants sortent, comment nous devrions les implémenter, ce qu'ils font avec les données qu'ils ont reçues d'autres composants, toutes ces sortes de choses. Donc, nous allons examiner ça. Ah, beaucoup plus. Ce que nous devons faire pour commencer est de télécharger un fichier ZIP qui contient un fichier html squelette dans lequel nous allons faire notre codage. Comme vous pouvez le voir, ce fichier est appelé un recomptage de Scratch Doctor, que vous pouvez télécharger, et je vais juste double-cliquer dessus, et vous pouvez voir que crée un dossier dans ce même répertoire à l'intérieur de ce dossier est un recount dot HTM L Alors ouvrons cela avec l'un de mes milliers de texte. Les éditeurs utiliseront le code Visual Studio aujourd'hui. Comme vous pouvez le voir, nous avons un document HTML ici, a une tête et un peu de contenu. Ensuite, il relie les ressources. On a des styles prédéfinis juste pour nous sauver. Ils se soucient de jouer avec CSS ce que nous apprenons sur réagir. Et ici, nous avons quelques fichiers liés externes que nous avons besoin pour réagi pour vous exécuter maintenant navigateur. Maintenant, c'est un exercice éducatif, donc nous sommes vraiment liés directement à ces fichiers dans le navigateur, mais dans une situation de développement normale, nous n'aimerions pas cela. Gardez donc à l'esprit si je ne peux pas le faire dans un environnement de développement de production . Ah ferait tout ce genre de choses sur la ligne de commande et produirait un fichier bundle pour inclure, vous savez, source. Mais c'est un peu en dehors de ce que nous regardons dans ce cours particulier, parce que nous sommes ici pour en apprendre davantage sur les fondamentaux, hors construction d'interfaces, utilisation de réaction, et c'est ce que nous allons commencer faire en ce moment, a dit que vous avez le code du réacteur commence ici et vous pouvez voir ce qu'un type de balise de script est égal. Voyage texte est la façon dont nous indiquons que tapaient quelque chose qui ne va pas être assez bon JavaScript. Et, euh, ce fichier babble mindo Js Il est responsable de s'en occuper maintenant, réagissant aux visages sont composés de composants. Et donc nous ferions mieux de commencer par définir notre tout premier composant, et ce sera une fois que j'ai arrêté de faire mon type d'être une petite fonction dans une calculatrice locale , et dans ce cas, une fonction n'a pas vraiment à faire quoi que ce soit autre que de retourner quelque chose. Et dans ce cas, il va rendre J 6. Maintenant, à la fin de cette conférence particulière, sera à la recherche de JSX dans plus Ditto. Hum, ça ressemble beaucoup à HTM No. Ah A Z peut voir qu'il y a quelques différences comme ce nom de classe avec chameau Andi. Nous allons donner notre classe de composants peu, nom off, calculer ou sauvage avec top était ici aujourd'hui et à l'envers calculer j'aurai un gros zéro de graisse , et c'est donc une fonction pour rendre un composant de réaction. Et c'est à peu près aussi simple qu'un composant réactif va jamais obtenir. Comme je l'ai dit, nous retournons quelques JSX. On parlera de J 6 dans un instant, mais ce n'est pas suffisant pour obtenir quelque chose, vous savez, navigateur. Parce que si vous obtenez sur le navigateur de crabe en ce moment, faites un rechargement de ce fichier. Vous pouvez voir qu'il n'y a rien là-bas, et l'une des choses que nous devons faire pour afficher un composant dans le navigateur dans React est utilisée. Réagissez, dongle, dit Render. Ici vous pouvez voir que nous avons réagi, Dom, et c'est le fichier qui est responsable de rendre notre réaction dans un navigateur. Parce que, bien sûr, réagir n'a pas à apparaître dans un navigateur. On pourrait aussi générer du côté service. Il y a beaucoup de discussions en ce moment sur la fibre de réaction, qui va prendre en charge plusieurs rendus pour réagir, mais beaucoup à utiliser vraiment stupide pour rendre comment composant dans le navigateur. Donc, nous pouvons référencer comment composant comme ça. Comme vous pouvez le voir, il semble que nous venons de faire un HD personnalisé sans Ted appelé calculatrice, qui est qui se trouve être auto-fermeture et donc réagir. Dorm dot Render nécessite un composant sur. Il doit également savoir où il doit rendre ce composant. Donc on va le mettre et on le mettra ici. Donc, nous avons cet accord avec un conteneur I D off, et c'est là que tout notre code de réaction va être rendu dans notre document HTML. J' ai un document Get Nana by I d Container, et ça devrait être suffisant pour nous faire avancer. Et il y a un gros zéro. C' est excitant. Donc, vraiment, nous voulons faire quelque chose d'un peu plus intéressant que ça. Et donc nous devrions avoir un affichage de calculatrice et donc rendre que lui à peu près exactement de la même manière. Je vais juste faire du café de ce gars parce que ça va être très similaire, et on l'appellera Cal Display. Je vais continuer avec la convention restante une fois de plus, et nous aurons toujours un zéro là-dedans, vous savez, juste pour garder les choses intéressantes. Mais maintenant, dans notre qui était des ventouses. Et au fait, euh, euh, mais maintenant à l'intérieur du composant calculé, beaucoup libre de référencer le composant d'affichage du canapé. Et ce que ça fera, c'est quand on rendra la calculatrice, cette calculatrice viendra ici et elle reviendra. C' est J. est X et à l'intérieur de cette prison, Cal pourrait afficher et dire, Eh bien, Eh bien, nous avons besoin de ce compte Display. Donc, ici, ce sera à son tour, a provoqué l'exécution de cette fonction d'espion de personnage. Et c'est JSX sera rendu papa et lui. Voyons comment on regarde maintenant. Et j'ai un zéro et vous pouvez voir que Al zéro a changé d'apparence parce qu'une fois de plus, rappelez-vous juste, nous avons quelques jolis et CSS et que voir, il dit définit des styles pour quelque chose avec la classe neuf , rappelez-vous juste, nous avons quelques jolis et CSS et que voir, carat affiché afin que vous puissiez voir comment nous commençons à construire une interface en combinant des composants réactifs. La prochaine chose sur calculer va avoir besoin d'un bouton. Donc je veux un bouton. On va faire une fonction. Eh bien, pour l'instant , l'affaire des accessoires. Nous allons, euh, nous verrons comment ça marche dans un instant, en fait , comme maintenant, parce que nous allons devoir l'utiliser pour entendre faire un bouton de canapé. Ok, donc encore une fois, on va rendre un cerf. Euh, très vivant. Les balises HTML qui ont pris en charge par J six, d'ailleurs. Donc, vous avez des travées et des pois, et donc ils pourraient avoir des travées et des balises P et tous les articles knaves tout mais va coller. Teoh donne maintenant. Et, bien sûr, cela aura un nom de classe à la maison devant. Parler et taper n'est pas mon point fort. Ok, Dave, comme ah, comme ça disait tout. C' est ce que nous allons faire dans cette conférence que nous examinerons plus en détail plus tard. Uh, allez juste sur les choses pour l'instant. À l'intérieur, ici. Eh bien, nous allons avoir beaucoup de fonds ou une calculatrice, donc ça n'a pas vraiment de sens pour les valeurs de code dur. Je veux dire, ça n'a pas de sens. Les valeurs codées en dur dans nos personnages jouent non plus, mais ça va faire pour l'instant. Mais dans un Cath Barton, nous voulons que les choses soient un peu plus intéressantes. Donc je vais référencer quelque chose appelé cette valeur Krups pensée. Et ces Kelly prix une indication Teoh comment, euh, double paquet ou bulle, bibliothèque que nous utilisons une expression à l'intérieur d'un j six et que cette expression devrait être évaluée. Et donc, dans ce cas, nous référençons une structure de données qui appartient à ceci, et cela va avoir quelque chose appelé valeur dedans. Et de quoi vient cette valeur ? Eh bien, la valeur est facile de trouver le nom de ce qu'on pourrait appeler ça Elephant Popsicle ou tout ce qu'on veut. Hum, mais bien sûr, valeur. Et pour qu'on puisse avoir un coup et juste sortir dans une vache comme une vache. Mais c'est une valeur égale et dire pourquoi. Oui, alors voyons à quoi ça ressemble. Il recharger le navigateur maintenant et rien. Pourquoi, alors c'est parce que se référant à ces accessoires, c'était une erreur stupide parce qu'il recevait clairement des accessoires ici. Nous n'avons pas besoin de nous référer à cela qui vient de l'habitude d'utiliser des classes plutôt que fonctions ayant besoin de Teoh se référer à une instance actuelle. Euh, nous allons utiliser des classes, euh, plus tard, pour définir des composants de réaction. Pour l'instant, l'utilisation de fonctions et de fonctions est assez bonne, mais nous, mais les classes nous donnent un peu plus de fonctionnalités, ce que nous aurons besoin. Mais le fait est que je n'avais pas à me référer à ce bureau. Vous devez utiliser des accessoires et, euh, euh, laissez-moi spécifier et la valeur comme ces attributs est ce que nous l'appellerions en html. Ah, et réagissez. C' est une propriété du composant du bouton du canapé et, euh, réagit, mais ça rend le bouton du canapé qu'il passe. Quoi qu'il trouve ici dans une structure de données appelée accessoires dans la fonction, nous pouvons référencer leur valeur de stock appropriée. Ok, donc j'ai sauvé cette hante. Tu ne rechargeras pas seul. Le tout ici est un son zéro génial. Mais ça n'a pas encore l'air calculé, Vraiment. Ah, je vais juste aller de l'avant sur ce qu'ils verront dans un autre séparé, ma chère ? Très bien, euh, loin, six. Ok, donc ça constitue une rangée de boutons dans une calculatrice. Et vous pouvez voir maintenant si bien, et vous pouvez voir comment nous pouvons utiliser, euh, les plaignants Teoh composer une interface pour réagir. Parce qu'une fois que vous en avez un et que cela fonctionne comme nous le voulions, alors nous sommes en assez bonne forme pour aller utiliser ce composant partout et comme nous . Et ce n'est pas censé être des soustractions. Première vision créative. Comme vous pouvez le voir, je suis juste très proche. Teoh a calculé les normes ici. Hey, comment l'ordre des opérateurs et ce sera cette attraction sur. On a besoin de plus de ces gars, non ? Way nécessaire. Comment ? Euh, on a C pour clair et on a besoin d'un zéro tout au long, calculatrice sur égal et enfin édition. Ok, alors sauve ça. Eh bien, c'est là. Mais ça a l'air un peu bizarre des antipodes. Quelque chose d'autre, j'en suis sûr. Comte Bottoms. D' accord. Ah, c'est lui le coupable. Calculer ou ça baise pendant que je parle jusqu'à ce qu'il puisse voir beaucoup de ça. Je m'excuse. Je ne peux pas dire qu'on a l'air un peu mieux. Et comment voici notre calculatrice. Comme je l'ai déjà dit, nous avons des styles pré-définis. Hum, qui sont quoi ? Déterminer qui est ce qui fait des boutons. Comment je ne bouge pas et ce qui ne va pas. Euh, mais vous pouvez voir comment nous devons trouver des composants de réaction en utilisant des fonctions comme ces composants contiennent. Eh bien, j'ai défini par j six et comment nous avons combiné ces composants ensemble, ce qui est à dire, composer avec eux avec une interface web composée en combinant ces composants que nous avons ensuite Renda en utilisant réagir Dom. Donc maintenant, nous allons revenir à la présentation pour regarder un sexe en chaîne un peu plus près, monsieur, dans notre petit exercice de codage en ce moment, nous avons vu beaucoup de choses sur J S X. ressemble au HTML ? Ce n'est vraiment pas html. Qu' est-ce que JSX ? C' est JavaScript, extension de syntaxe. Au moins, c'est le nom que Facebook lui a donné il y a peu de temps. Um, ils semblent avoir reculé un peu de ça maintenant, n'ont pas dit qu'il appelait ça depuis un certain temps ou fait référence à son extension de syntaxe JavaScript. Euh, mais vous ne pouvez pas le considérer comme du HTML que vous pouvez personnaliser si cela aide sur le haut. Je suppose qu'il y a peut-être que nous devons garder à l'esprit est que J 6 tags correspondent à des composants de réaction , donc c'est un chien heureux. Pourquoi est-il heureux ? Toujours heureux, parce que Jazz X nous donne des choses assez impressionnantes. C' est intuitif. Si vous connaissez HTML, vous pouvez regarder JSX et avoir une assez bonne idée de ce qui se passe. C' est concis. Ah, ces balises prennent beaucoup moins d'espace et nécessitent beaucoup de taper que de taper dans le script de travail . Tu devrais taper au lieu de monter une étiquette de sexe géante. Parce que chaque fois que vous voyez une balise JSX, ce qui se passe vraiment, c'est que nous créons des composants de réacteur et transmettons un tas de propriétés, et tout cela ajoute à avoir un code assez lisible. C' est génial. Cela rend les choses beaucoup plus évidentes et réduit simplement nos possibilités de commettre des erreurs. Mais c'est un âne dit. Pourquoi ce chien est-il ainsi dit ? Eh bien, JSX est un parfait. Malheureusement, cela nécessite plus d'outillage. Nous avons fait Teoh utiliser la bibliothèque Babel pour interpréter notre JSX et Trans l'empiler dans un JavaScript régulier . Sa sémantique inclut, ce qui est comme certaines personnes folles. Sa sémantique inclut, Ils détestent ça , , parce que, bien sûr, ça ressemble beaucoup à des méchants HTML et HD tout sur la création d'une structure sémantique sur la page Web personnellement ne me dérange pas. Et bien, une fois, les pages rendues avec javascript étaient une sorte de robots Web invisibles comme Google. Mais ce n'est plus vrai. C' est un des tests récents, disons récents, pas parier récemment, comme 2015 certaines personnes ont testé leur page Web J s ex généré. Juste qu'il a aidé a été indexé par un tas d'appelants Web et de moteurs de recherche, et il a été complètement indexé par tout le monde. Juste qu'il a aidé a été indexé par un tas d'appelants Web et de moteurs de recherche, Sauf, je pense que Baidu de Chine parce que ces moteurs de recherche maintenant ils exécutent le JavaScript , leur rendu la page avant qu'ils tentent de l'explorer. Donc si vous voyez quelqu'un dire, eh bien, réacteur de sortie jazz, accord, mais ils seront invisibles pour les moteurs de recherche qui ne sont plus vrais. La prochaine chose que nous avons besoin de Teoh aller sur est quelques petits changements qui ont eu lieu dans la façon dont nous disons un navigateur de cette façon, en utilisant J s ex maintenant normalement dans le type de développement habituel mis en place. Nous n'avons pas à le dire au navigateur car nous n'incluons pas directement un JSX dans les chutes HTML. Mais pour le bien de l'apprentissage réagir. Comment allons-nous faire ça ? Et nous devons dire au navigateur que nous utilisons du code JSX et pas un maki vraiment formaté html mélangé avec JavaScript. Alors, quel est le point dans le temps ? Nous avons fait ça pour mettre un commentaire au début de notre J 6 comme ça. JSX a détruit à l'aube afin que le navigateur sache ce qu'il recevait. On ne fait plus ça. Maintenant, nous le faisons dans notre balise de script. Nous lui donnons un biseau de type barre oblique, qui dit au navigateur Hey, babble a besoin de prendre soin de ce truc qui est donné à babbler. Et puis notre J 6 et le reste de notre code seront rapides et exécutés avec succès. Et la raison pour laquelle je vais dans tout cela est parce que vous trouverez toujours l'ancienne façon référencée dans certains anciens articles. Si vous googler autour de la forme ou des informations sur J s ex comment cela fonctionne. Donc c'est une tête pour toi. Donc juste un bref résumé de tout ça. C' est beaucoup à couvrir dans une même nature. Mais rappelez-vous juste, les balises JSX sont équivalentes à des composants de réaction et rappelez-vous enfin que la fonction de rendu définit l'apparence tout un composant de réaction. 4. Créer des composants avec des cours: Hey, tout le monde les bienvenus dans cette conférence parlera de définir des composants de réaction avec des classes. Vous pouvez voir que nous avons défini un composant calculé global et le remplissons avec des composants hors tension d'un Siri pour définir un affichage de calculatrice et des boutons. Pour le moment, ces commandes aériennes ont tiré avec des fonctions pures sur c'est génial. Chaque fois que nous pouvons utiliser des fonctions pures pour définir un composant, nous devrions. Cela rend le code beaucoup plus facile à maintenir et à comprendre quand nous essayons de comprendre pourquoi les choses ne fonctionnent pas à leur façon, ils devraient. Cependant, les classes nous donnent plus de fonctionnalités qui nous permettent de faire plus sans composants, et c'est pourquoi elles vont les vérifier aujourd'hui. Quel est le but de la nature d'aujourd'hui ? Eh bien, tout d' abord, nous voulons faire quelques composants en utilisant des classes, et deuxièmement, couvrira brièvement. Pourquoi ne voudrait pas utiliser une classe en premier lieu ? Alors pourquoi voudrait-on l'utiliser ? La classe ? Vérifions ça. Comme nous pouvons le dire, nous avons ces petites fonctions qui définissent les composants et même notre composant de calculatrice , qui est un peu plus grand. Il a remarqué la fonction, cependant, cependant, il y a des choses que nous ne pouvons tout simplement pas faire avec les fonctions. Ces choses incluent le maintien de l'état comme le suivi des valeurs de, ah, une interaction utilisateur à la définition suivante des valeurs par défaut. Nous examinons brièvement le passage de la valeur dans un composant comme la valeur de début de prop ici. Et si nous voulions que Teoh donne une valeur par défaut ? Mais si nous voulions le valider, nous ne pouvons pas vraiment le faire dans une fonction. Ce sont le genre de choses que, euh, les cours nous donnent. OK, donc nous allons convertir notre fonction pure en une classe, et la première chose que nous devons faire est de créer une définition de classe était un bouton scout de classe et il s'étend. Eh bien, réagissez. Allez, allez. Ok, donc il élargit le composant réactif. Et la seule fonction qu'une classe de composant de réaction doit avoir est le rendu Orender est trois fonction qui est responsable de la définition de la façon dont le composant apparaît dans le navigateur. Fonctions de rendu Onda va faire exactement la même chose que notre fonction pure précédemment . Nous devons changer la valeur du stock de prop à cette valeur d'arrêt pop sombre puisque nous sortons maintenant propriétés d'une instance de classe et elles ne sont pas passées dans une fonction pure. Non, les réacteurs ont pris soin de tout ça. Dans les coulisses, nous appelons juste l'affichage du nombre Nous appelons Cath Button, mais je dois m'inquiéter de la façon dont les propriétés entrent là-dedans. Mais nous avons maintenant converti le bouton de compte en une classe, alors allons-y et voyons à quoi cela ressemble dans le navigateur. Donnez ça un rechargement et c'est là. Vous pouvez voir que nous affichons sans boutons exactement comme nous l'avions fait auparavant. Et nous n'avons pas eu à changer la façon dont nous avons utilisé le bouton talc vers le bas et ici et le composant de la calculatrice. Tout s'est passé ici, et les changements se sont déroulés de façon transparente, donc c'est génial. Donc, comme un petit exercice de vêtements minuscules, je vous invite maintenant à convertir le composant d'affichage Cal, et le composant de calculatrice de fonctions pures dans deux effondrements dit, S'il vous plaît pause la conférence et aller. Faites ça, puis revenez à la conférence et je travaillerai aussi rapidement. Ok, donc nous avons de retour dans la nourriture et c'est à mon tour de convertir ces choses des fonctions en classes, disons l' classes, affichage des capuchons de classe. Je n'ai pas besoin d'affleurements qui s'étend, étend, réagit composant. Nous avons notre fonction de rendu, qui retournera la même chose. Votre fonction a déjà fait et de la même manière entrera dans. Il est à propos de calculatrice. C' est une calculatrice de classe et réagissez son nom et rendez cela s'il vous plaît. Bryant va porter 44 personnes. C' était que c'est comme, hum, 20. Mm, si bien. Correct. Je suis heureux parce que j'ai bien compté mes indentations. Ok, donc on va sauver ça. Nous avons appliqué une définition de classe à nos composants implémentés rendu. Ça va voir si tout ça marche. Et puis on l'a sorti. Petites calculatrices maintenant à trouver avec des composants que dans les classes et pas des fonctions pures. Revenons donc à notre conférence afin que nous puissions parler de ce que nous ne devrions pas faire lorsque nous définissons nos composants comme des classes. C' est quoi une époque comme ah, six mois ? C' est ainsi que nous définirions une classe rouge utiliserait la classe React dot Create. Ce n'est plus le chemin. Comme vous l'avez vu, nous utilisons maintenant la classe tout ce qui étend le composant de point de réaction et sachez simplement que vous verrez l' ancienne version à nouveau lorsque vous googlez et lisez des trucs de réaction. Vous verrez la façon précédente de le faire, en utilisant notre classe de création de point de réaction. Ne fais plus ça. Étendez plutôt le composant de réaction. Alors rappelez-vous, les classes nous donnent plus de fonctionnalités comme les constructeurs, les valeurs par défaut, gestion des événements de validation, beaucoup de choses passionnantes. Um, ils sont créés en étendant réaction, dr Component et pas réagir dot Create classe. J' espère que ça vous a plu. Et j'ai hâte de vous voir dans la prochaine conférence lorsque nous parlons plus des propriétés des composants de réaction . 5. Propriétés de composants React: Hé, tout le monde, bienvenue. Aujourd'hui, nous allons parler des propriétés de réaction. Comme vous l'avez peut-être entendu, les composants de lecture ont deux types de données. Ce deux types de données hors propriétés et l'état. Aujourd'hui, on va vérifier les propriétés. Alors, quels sont les restes colorés ? Une conférence ? Eh bien, c'est d'apprendre à utiliser le composant des propriétés dans la réaction et aidera également à définir les valeurs de propriété par défaut , lesdites propriétés sont assignées à un parent à un enfant comme ça, et elles sont accessibles via le cette construction d'accessoires de point. Alors, vérifiez. Nous l'avons déjà vu dans notre petite pré-mise en œuvre. Hors de la calculatrice. Nous avons notre calculatrice de clause Woe Be ici et ah, il utilise ces composants de bouton de cack et vous pouvez voir qu'il affecte la valeur de, dans ce cas, un à quelque chose appelé valeur. Donc, les propriétés, ils ressemblent énormément à des attributs en HTML, mais ce sont des propriétés pour un composant de réacteur. Et donc si nous avons notre bouton coq seulement signer quelque chose à notre propriété appelée valeur là-bas, ici dans la définition du bouton de canapé, nous pouvons alors aller de l'avant et référencer ce que les problèmes commencent valeur. Et nous n'avons pas besoin d'utiliser la valeur de nom ici, n'est-ce pas ? C' est Ah, le nom qui s'affaiblit. Attribue-nous. Ça pourrait être du raifort, du dingbat ou tout ce qu'on veut. Mais ce point est que chez le parent, nous lui donnons une valeur dans l'enfant. Nous y accédons via ce stop accessoires, valeur de pensée. Et je suppose que l'une des choses qui est le plus important à réaliser en ce moment sur les propriétés est qu'elles sont immuables. Donc, si je devais y aller, en fait, jetons un coup d'oeil à cela dans le navigateur d'abord. Et le voilà, c'est sa sortie. Une petite calculatrice ne fait rien encore si nous vérifions notre contrôle. Et ici, nous avons nos avertissements standard sur l'installation des outils réactifs, que je n'ai pas pris la peine de faire dans Chrome. Hein ? Avait aussi nous dire que nous sommes en quelque sorte de l'utiliser en mode de développement. Ce n'est pas une configuration de production, et en effet ils sont si corrects. Mais on ne va pas s'inquiéter de ça maintenant, hum, c'est un exercice d'apprentissage. Donc, comme on peut le voir, on n'a rien d'autre à craindre dans la salle de concert en ce moment. Mais si nous passons par ici et je bouton mollet très nord le modifier ou modifier notre fonction de rendu . Droit ? Je mettrais ça dans la déclaration de retour, disant que vous commencez les accessoires. La valeur est égale, disons qu'il, euh d'accord. Excusez-moi. Perdu contrôle. Éditer. Ok, il est Ah, ouais, je voulais faire était de mettre un commun similaire sur l'individu. Alors, il est comment ? Yee hah ! Et si je retourne au navigateur et recharge, euh oh, regarde ça. Impossible d'affecter à la lecture sur la valeur de propriété de l'objet barre oblique objet hachage. Et puis un tas d'autres informations potentiellement utiles sur l'endroit où c'est. Il pourrait vous voir, euh, mais ne tient pas en arrière. Donc, ils disent que ce sont des accessoires sont en effet immuables. N' ont pas été autorisés à les changer dans la classe. C' est vraiment eux. Craignez cette valeur de stock Stop prop. Ah, le genre de données que nous pouvons changer est Cold State. Et nous regarderons ça dans un couple qu'elle a fini. Donc je vais juste me débarrasser de ça maintenant. Alors regardons un peu comment les propriétés fonctionneront. OK, alors disons juste que nous avons une interface web et de ce nuage de marshmallow rose qui représente nos données provenant d'un réseau quelque part. Nous avons une valeur J'aime et j'aime est réglé sur 12 et il nous avons un composant parent. Bien. Donc, le composant apparent obtient cette valeur aime de 12. Mais vous savez, il ne sait pas vraiment comment l'afficher. Il est chargé de rassembler les informations. C' est, Ah,l' Ah, identifiant associé que nous affichons des goûts. Mais quand il s'agit de l'affichage réel, eh bien, c'est, ah, c'est un peu perdu, mais c'est OK, parce qu'il a un autre composant qu'il peut passer. Cela aime la valeur en tant que propriété d'un composant enfant. Super. Donc, il est pur et simple. Et ainsi il passe son ventre à travers l'enfant. Et puis l'enfant sait exactement quoi faire avec ça ici et il y a, ah, gros pouces en haut et 12 à côté. Donc nous avons fait que j'aime rendu de cette façon. Et même si la réaction est tout ce que la vue en ce qui concerne les interfaces utilisateur, nous devons encore maintenir une sorte de séparation des préoccupations entre les différents composants et la gestion de leurs fonctions. Donc, dans ce cas, le parent sait comment extraire les données du cloud, et il sait probablement comment les organiser d'une manière qui a du sens sur la page Web. Et puis nous avons une autre couche. L' enfant, qui ne sait probablement rien d'où viennent les données, ne se soucie pas beaucoup de la façon dont elles sont organisées. Tout ce qu'il sait, c'est qu'il suffit de jouer 12 likes sur la page. C' est un modèle assez commun dans la réaction. Donc maintenant, il est temps de faire du codage, et ce que nous allons faire est de commencer à utiliser des propriétés sur notre affichage cal composant, qui n'utilise pas les propriétés en ce moment. Il affiche juste une valeur fixe hors zéro. Jetons un coup d'oeil à ça maintenant. Ok, donc ce n'est pas encore très utile pour nous. J' ai l'écran de la calculatrice. Il affiche la valeur zéro. Euh, mais, tu sais, il voulait probablement montrer d'autres choses. Probablement des valeurs que nous passons dedans. Allons donc à l'endroit où il est utilisé. Et, euh, donnons-lui une propriété, et on peut appeler. Oh, ça. Euh, ouais, je pense qu'on appellera ça pour afficher un numéro et très, euh, juste dit Reno que nous avons fait des changements ici va le mettre en 99. Maintenant, ce n'est vraiment pas beaucoup plus utile que d'afficher ce zéro ici. Mais c'est ce que nous pouvons faire pour l'instant et d'autres sur l'utilisation d'accolades ici. Donc, dans JSX étaient libres d'utiliser des balises et des propriétés casées de chameau, dont certaines sont joliment trouver, comme, nom de famille. Mais si on veut utiliser une expression, on doit le faire à l'intérieur de ces courses de filles. Mais si on veut utiliser une expression, Maintenant, nous voulons une expression. Nous voulons référencer ce truc pour le numéro d'affichage upstart. Ouais, OK, je vais sauver ça. Et maintenant, quand nous passons à notre calculatrice et faisons un rechargement rapide, vous pouvez voir que j'affiche 99 affichage. Donc ce n'est pas super, euh, surprenant. Vraiment ? Parce que vous avez déjà vu comment cela fonctionne. Phillips retourne à notre code et bien dit que de retour à zéro pour l'instant, bientôt, bientôt, nous allons mettre à jour la calculatrice de sorte que l'affichage de la calculatrice change réellement lorsque nous appuyons sur un bouton. Um, c'est dans deux élections. Mais d'abord, il y a quelque chose que nous devons explorer, et c'est la notion de valeurs par défaut pour les propriétés et l'une des bonnes choses à propos de l'utilisation des classes est que nous obtenons des fonctionnalités supplémentaires. Comme je l'ai mentionné, dont une est, euh, ces fonctions statiques. Et on appellera ça à la faute. Peut-être que les accessoires par défaut font partie de l'interface du composant de réaction pour un P I. Et son travail est de retourner un objet JavaScript. Et cet objet de script de travail aura une paire de valeur de clé ou des paires de valeur de clé, qui dit tomber les valeurs pour les propriétés de ce composant. Donc, dans ce cas, nous avons besoin d'une valeur par défaut pour le numéro d'affichage. Quelque chose est un numéro d'affichage et sera assis là à partir de soutenus dans 19 9 Ok, alors allons-y. Et bien, si nous sauvegardons cette Aiken chaud à travers notre navigateur, faites-le compter sur, vous pouvez voir qu'il revient à zéro. Et c'est parce qu'on attribue zéro au numéro d'affichage ici. Mais est-ce pour une raison quelconque que nous voulions compter les affichages ? Oui. Euh, quoi d'autre ? Um, calculé que seraient-ils et que le premier va orteil avoir, comme aucune valeur assignée au numéro d'affichage dit pour faire ça et dans un rechargement, voici les affichages de la calculatrice. Donc il est le 1er 1 sans aucune valeur assignée au numéro d'affichage. Ernie peut voir que c'est le Père à 99 et le 2ème 1 qui a une valeur par défaut lui est assignée , a été mis à zéro. Et donc juste pour terminer, rappelez-vous que pendant que je réagis, les composants ont deux types de données. Aujourd'hui, nous avons regardé les propriétés ah, accès à l'air via ce point accessoires point quel que soit le nom de la propriété et ils sont assignés par apparent à un composant enfant. Et enfin, ils ont des valeurs par défaut définies par les accessoires par défaut de la fonction getter esthétique. 6. Une base de données à partir d'une manière simple ! C'est géniale !: Hé, tout le monde, bienvenue. C' est juste que je très rapide petite sorte de revue. Ou si, mais un examen juste je, euh, façon différente de résumer ce dont nous venons de parler avec les propriétés des composants de réaction et d'explorer également ces implications légèrement plus larges que j'ai dit que nous sommes va parler sont un point de vue pour réagir. Maintenant, c'est un peu un gros problème dans la réaction parce que c'était vraiment une chasse d'une façon fondamentalement différente de faire des choses à la plupart des applications javascript. On va vérifier lequel ? Ma fille depuis des années et, euh, certains des avantages qu'elle nous donne en tant que développeurs réactifs. Lorsque nous préférons un flux de données à sens unique. Parce que, comme nous le verrons, ce n'est pas super pratique d'avoir toutes vos données dans une direction de toute façon. Tant d'applications JavaScript ressemblent à ceci. Donc, si nous disons que ces points bleus représentent des nœuds dans le navigateur d'aide Dom et qu'un événement se produisant dans l'un de ces points bleus pourrait provoquer un changement d'un des autres points bleus. Et je pense que nous avons bien vu, parce que , vous savez, vous devez totaliser un bouton, pas de clic quelque chose ou taper un texte Ian quelque part et avez-vous envie de changer un message de validation sur votre page ? Ou vous voulez qu'un statut modifie sa représentation par la couleur. Voir changer de couleur sur ces choses peut finir. Écoutez, tous ont la page. Et, hum, ça peut être difficile de trouver ce qui change. Qu' est-ce que quand on réagit, ça ressemble un peu plus à ça. Et vous pouvez penser que je suis un peu plus de vendre le cas un peu ici en présentant un JavaScript typique avec toutes ces lignes folles allant partout et il réagit une avec ceux-ci, comme gentil, propre peu simple lignes descendant. Vraiment, c'est autant que possible comment nous aimerions que nos applications fonctionnent. Mais cela nécessite une sorte de changement fondamental dans la façon dont vous pensez de la façon dont vous développez votre application. Parce que quand on a ça, c'est vraiment super facile de penser bien, j'ai besoin d'aller m'asseoir un style différent sur cet élément tout le chemin là-bas. Eh bien, la façon dont ils la façon dont ils parlent à l'intérieur d'une classe, faites-le ou modifiez-le directement, hum, que dans ce cas, nous devons prendre très soigneusement l'endroit où notre parlent à l'intérieur d'une classe, faites-le ou modifiez-le directement, hum, que dans ce cas, fille vient et comment fonctionnent les interactions. Mais de toute façon, tu n'es pas typique. JavaScript. Si vous avez cette situation, où est orange ? Le gars a changé. Et si c'était un comportement inattendu, nous avons une tâche qui nous attend à trouver pourquoi, Où ? Euh, ça a été changé. Mais en réaction, nous savons qu'il n'y a vraiment qu'un autre nœud maintenant composant parent qui peut affecter cette note. Ou nous l'espérons. Donc, notre travail hors débogage, rien ne devient soudainement beaucoup plus simple ou nous avons au moins une question de liste à répondre, qui est quel nœud a causé le changement Maintenant, qui a noté, a commencé le défi pourrait être complètement question différente, mais elle a vraiment rendu la vie beaucoup plus simple à partir de là. Mais si nous revenons à notre exemple précédent de notre interface, euh, euh, mais nous avons des données qui sortent du nuage, et cela va aux parents apparemment positifs pour un enfant. Enfant le rend sur la page Web. Tu sais et si quelqu'un clique sur la lumière ? Eh bien, les données doivent évidemment revenir dans l'autre sens. On ne peut pas rester assis sur 12 pour toujours, non ? Hein ? De toute évidence, données doivent revenir dans l'autre direction, et c'est à cela que sert l'état. Alors traîner autour pour la prochaine conférence où nous étudions rivière commencer un flux en réaction. 7. Reverse dataflow - pourquoi nous en en avons en besoin !: Hé, tout le monde, Bienvenue dans cette classe, nous allons parler de flux de dard inverse, ce qui veut dire, nous allons vérifier comment un composant enfant peut transmettre des informations à , puis nous verrons ce qu'un composant parent ferait généralement dans ces circonstances. Alors, quels sont nos objectifs aujourd'hui ? Nous comprendrons. Inverser le flux de données en réaction, et nous allons même midget aussi. Alors, on va se fissurer. Regarde ça. On dirait des ennuis, n'est-ce pas ? Nous devons avoir renversé la réaction étrangère parce que les composants parents ont besoin de savoir ce que leurs composants enfants préparent. Alors voici notre petit Dom. Donc c'est un très bon C'est simple. C' est compréhensible, rend un code facile à déboguer. Mais quand nous regardons notre petit goût, votre appareil, je dois demander bien, comme est cliqué. Que se passe-t-il ? Il doit être mis à jour. Et donc cela nous amène à l'idée que nous pouvons passer des fonctions en tant que propriétés et données. Maintenant, bien sûr, les fonctions sont comme celles-ci. Ils ont échangé ses membres de première classe en Javascript pour qu'on puisse les traiter sa fille. Et donc ça va redondant de dire qu'on peut transmettre des données et des fonctions. Mais le point Kim sorte de se perdre, parce que lorsque nous passons une fonction dans un composant enfant de réaction, il devient une fonction de rappel. Et, bien sûr, les programmeurs JavaScript généralement pas de trou sur les fonctions de rappel. Et donc ce que nous pouvons faire sans fonction de rappel est si notre petit bleu foncé en bas ici est des clics, il peut appeler la fonction qui a été passée en tant que propriété. Cette fonction est exécutée, qui se produit composant indépendant sur généralement l'enfant compile une sorte de données dans cette fonction et qui dira le composant parent de ce qui se passe. Et donc cela nous donne une compréhension claire encore hors. D' où viennent les valeurs qui viennent ? Parce que si nous sommes maintenant le composant parent le gars vert ici et que nous voulons bien savoir, comment a-t-il obtenu cette valeur qu'il a au moment où il passe à son travail  ? Eh bien, cette vallée sera généralement assis, hum, dans la composante parent et seulement dans la composante parent. Et nous savons que cette valeur peut être modifiée comme un effet secondaire d'une fonction de rappel en cours d' exécution maintenant, un petit mot d'avertissement récemment obsolète ID ou quelque chose appelé l'état lié. Mélangez et vous verrez toujours cela apparaître dans les résultats de recherche Google ici et là. C' était un vaccin. Vous pouvez appliquer à vos classes de composants de réaction qui vous permettraient de lier l'état avec champs d'entrée et de sorte que l'état soit automatiquement mis à jour lorsque vous entrez quelque chose dans une sorte de champ d'entrée. Le baseball a abandonné ça, et le Link State Mixon n'est plus. Donc, si vous voyez quelque chose comme ça dans un résultat de recherche Google, je sais que vous regardez des informations obsolètes. Il existe un moyen pour un composant enfant de mettre à jour les données d'un composant parent. Et c'est en utilisant des fonctions de rappel. Non, clair qu'il est temps que nous commencions à mettre en œuvre. Ah, un flux de données inversé dans notre calculatrice, alors restez serré. Nous allons y aller et le faire dans le code maintenant. Alors s'il vous plaît ouvrir votre cœur commence à aller dans votre éditeur de texte préféré et le code avec moi. Ok, tout le monde, bienvenue dans notre cud. Donc, je retourne à la navigation pour parler de ce que nous allons faire maintenant. Donc, ce que nous voulons faire est d'implémenter une sorte de flux de données inverse dans notre calculatrice. Et, euh, nous allons le faire en nous assurant que lorsque ce bouton est cliqué, alors ce composant calculé sait que c'est un composant de calculatrice comme le tout avec tous les boutons dans. Malgré son composant apparent et tous les boutons les gars, ils sont des enfants hors de ce composant parent. Donc, ce que nous voulons faire est de nous assurer que nous cliquons sur un bouton et qu'un parent le sait et peut faire quelque chose d'utile avec la valeur des composants enfants. Donc, nous voici dans un code. Voici le composant de bouton de coq, qui met en œuvre les fonds sur la calculatrice, et ici, nous avions sur le composant de la calculatrice. Vous pouvez voir qui il peut voir qui frappe en utilisant les boutons Calcutta pour implémenter cette interface de calculatrice . Donc, ce que nous voulons est de passer une fonction du parent dans le composant enfant, puis que le composant enfant utilise cette fonction lorsqu'il est cliqué. Donc la première chose que nous ferions mieux de faire est de nous assurer que nous avons une fonction que nous pouvons transmettre en voyant. Disons que nous aurons un bouton, pas un bouton, un code de fonction jusqu'à aujourd'hui, parce qu'en fin de compte c'est ce qu'il va faire. Ça va se mettre à jour. Um, j'ai calculé le numéro d'affichage, ce qui aurait pu se passer sur une calculatrice quand on clique sur le bouton, non ? Je vois de la valeur là-dedans, et nous ne ferons rien de terriblement excitant sans un instant. Les commandes mettent une valeur droite. Et donc il est au bon fonctionnement. Et maintenant, nous voulons passer cela en tant que propriété pour sortir le composant de bouton cal. Et nous devons passer cela dans le composant de bouton cal en tant que propriété. Je vais le donner sur notre nom ridiculement long. Juste pour la lutte de la clarté. Vraiment plus que toute autre chose, ce n'est pas une zone de Carrie numéro. Donc, quand ils passent, euh, cette fonction dans le composant maintenant enfant et notre enfant comporté mieux faire quelque chose avec , a dit que c'est idiomatique en réaction eu le moment de ne pas exécuter de fonctions ou de fonctions de rappel directement à partir d'un événement. C' est plus idiomatique pour toi. Faites-vous une petite fonction locale pour gérer les événements, puis à partir de cette fonction, exécutez votre fonction Colback. Et donc on va avoir une poignée, cliquez. Et donc quand on clique sur notre bouton de capuchon. Nous voulons poignée Cliquez pour être exécuté si bien, mettre sur clic égal Notez le cas de chameau. Mes amis ce clic de démarrage et encore une fois vous pouvez voir que nous utilisons, euh, ces accolades parce que c'est une référence d'expression à une fonction est une expression et les accessoires trucs point signalent une pression sur un bouton. On y va. Et, hum évidemment, nous avons reçu une valeur. Nous transmettrons cette valeur à l'extérieur. Apparemment composant afin que nous sachions. Mais le numéro un a été cliqué sur ce bouton numéro deux, mais le numéro trois ou le bouton de division afin qu'ils arrêtent peut-être la valeur sombre. Ok, donc on est assis sur Click Handler. Et maintenant, sur la fonction de gestion de flick, nous exécutons maintenant la fonction de rappel. Donc, nous disons que nous pouvons aller à notre navigateur, re obscure et cliquer numéro un sur, et rien ne se passe. Vérifions ça, inspecteur. Prends un consul et oh, charmant. Regarde ça. Impossible de lire les accessoires de propriété désactivés. Non, ma chère. Maintenant, nous avons couru à un charme à travers les rides dans le développement du réacteur. Donc, nous voici, dans le bouton Capital et la poignée d'exécution. Cliquez maintenant et nous avons un peu de problème C'est parce que géré comme ne sait pas ce que c'est dans ce cas. Malheureusement, lorsque nous utilisons des fonctions pour la gestion d'événements comme celle-ci, l'instance actuelle de notre bouton cap n'est pas automatiquement liée à cette fonction. Donc il ne sait pas ce que c'est. Qu' est-ce que c'est ? Nous ne savons pas Donc, malheureusement, nous devons faire face à nous-mêmes dans le constructeur Maintenant, même si ce composant n'avait pas besoin d'être une classe au moment où nous l'avons transformé en une classe plus tôt Euh, c'est la raison pour laquelle um, nous devons le faire. Je reçois des accessoires de bande constructeurs et des tâches de test appelées Super Quand nos accessoires ont dit que classe parent peut avoir nos propriétés et faire quelque chose d'utile avec eux. Et puis nous devons dire, M. Handel, cliquer est égal à cette poignée. Trouver ceci et obéir Eh bien, nous allons sauver cela et gêner magiquement Hausa affichera un parce que c'est ce que nous avons défini notre fonction de mise à jour pour le moment et ne pas grogner dans la console JavaScript. Fantastique. Et bien sûr, nous cliquons sur trois. Rien d'autre ne fonctionne pas encore parce que nous avons seulement assigné et un bouton de rapport de calculatrice appuyez sur Teoh, bouton d' aide numéro un. OK, donc je vais juste faire ça aussi. Reposez-vous. Comment, Mais hones senior, construction de fautes de frappe Merci un, vous savez, juste aller et mettre ceux à travers le reste de la chose faite. D' accord. Je devrais vraiment avoir un espace entre, mais Curly Brace. Et que diriez-vous d'une étiquette fermée allait le faire rapidement. Ours avec moi. Donc, ne prenez pas de preuve temporelle. C' est mieux. Bon sang, maintenant nous avons dit recharger la calculatrice sur un. Très bien. Et j'étais comme ça a commencé à me plaindre de tous ces dialogues pour que vous puissiez voir qu'ils sont compressés. Ces boutons et ces êtres fonctionnent. Oui, en quelque sorte. D' accord, mais c'est bon. Vraiment. Ce que nous voulons faire est au moins avoir notre affichage de la calculatrice Un nombre, juste un nombre au lieu de zéro. Alors j'essaye de le faire maintenant, et c'est vraiment une introduction à l'état. Nous parlerons plus de l'état dans la prochaine conférence, mais nous allons y jeter un coup d'oeil maintenant. Donc ils constructeur. Il faut des accessoires, bien sûr. Et je fais ça pour deux raisons. La première est parce que, mais ce nombre va devoir être abaissé. Très bien, , ce n'est pas le numéro parce que, tu sais, je trouve que faire ça euh, hein. L' autre chose que nous devons faire est d'asseoir un certain état, et donc nous pouvons concevoir un état par défaut, ce qui est une assez bonne idée. Donc je dis seulement qu'il est coincé. Etat et état est une fois de plus un petit objet JavaScript. Je dirai que le numéro d'affichage est zéro. Un jour, on affichera autre chose que zéro. Mais de toute façon, nous ne pouvons pas bon ici dira qu'au lieu de passer zéro comme ça, vous direz des choses que le numéro d'affichage ST point à la recherche. Donc on a dit que quelqu'un devrait commencer, dit-il. Ce serait une industrie de rue Medscape. Très bien, Sue, nous irons que le gouvernement fait un rechargement et heureusement à la calculatrice est toujours en train de jouer, affichant zéro. Donc, nous savons que notre assignation d'état par défaut fonctionne heureusement et ici dans le numéro de mise à jour , nous pouvons supprimer notre look A, afficher les affaires et dire à la place, c'est cet état. Non, pas comme ça. Non. Vous voyez, le constructeur est le seul endroit où nous pouvons assigner un état comme celui-ci et le faire coller. Sinon, nous devons utiliser une fonction spéciale appelée vous start, sit stage, puis nous passons un objet javascript dans la fonction d'état défini. Et cela sera en fait rester si nous venons de finir, assigné une valeur à lui directement. Sans utiliser l'état défini, nous perdrions cette valeur. C' est un vrai de dire, euh,le numéro d'affichage est égal à la valeur. C' est un vrai de dire, euh, euh, C' est bon depuis qu'il a fait face. Ok, donc nous allons dire ça et frapper sur un navigateur vraiment obscure. Et c'est un, tout cela et cela affiche les mises à jour. Et ce n'est pas, vous savez, des jours. Mais c'est, ah, ah, une grande amélioration par rapport à ce que nous avions auparavant. Donc c'est joli. Je suis content de ça. Mais il y a un amour, une petite chose que nous pouvons faire juste avant de finir de tromper sans état et c'est ah calculatrice pour créer un nombre plus grand qu'un ensemble de chiffres, je pense que nous allons dire bien, pour trouver un nouveau valeur, que nous allons charbon. Je dis que je vais dire « Laissez la liberté ». Oui, le coût, je suppose. Ok, vous affichez le nombre égal à déforme le numéro de données. Oh, en fait, ils veulent non, c'est vrai. Oui. Excusez-moi. Online est né. Buvez la première valeur. D' accord. Alors, qu'est-ce qu'on fait ici ? On prend une comtesse. Mon numéro et nous ne pouvions pas Katyn ating pendant l'édition Katyn Aging valeur à la fin de celui-ci parce que nous avons affaire à des chaînes ici. Alors maintenant, on peut. Alors allez-y et dites que c'est qui définit que vous affichez le nombre et bon, peu importe. Comme, ah, faire un rencard. Merci. Ils ont gagné une divinité trois, 46 et ainsi de suite. Et donc, si vous avez toutes sortes de bêtises là-dedans beaucoup et beaucoup de bêtises, accord. Mais maintenant, nous arrivons quelque part. On va un peu plus loin. Vraiment ? Sans affichage de la calculatrice. Ah, ça se termine pour cette session de codage. Nous aurons un examen beaucoup plus attentif à l'état et les conséquences compensant état dans le prochain assurez-vous. Et j'ai hâte de vous y voir quand nous commençons réellement à faire quelques ajouts et soustractions et des choses comme ça sans calculatrice. 8. L'état de React et ce qu'il fait !: Bon, bienvenue, tout le monde. Aujourd'hui, nous allons parler de l'état en réaction. Donc, nous avons eu un petit coup d'oeil à ST dans la conférence précédente où nous avons fait un état de modification calculé en utilisant des fonctions AC froides pour mettre à jour l'affichage dans la calculatrice. Et comme vous pouvez le voir, nous avons un peu de place pour l'amélioration sur. Nous allons le faire dans la conférence d'aujourd'hui, mais d'abord, parlons de ce que nous allons couvrir. Donc, notre objectif aujourd'hui est de comprendre et d'utiliser l'état. Même si nous avons déjà fait ce petit peu et connaissons les conséquences de la modification de l'état , il y a des conséquences. Voyons les maintenant. Disons que nous avons un composant apparié et qu'il exécute Rendah et ah, si un composant parent utilise un composant enfant, alors cette fonction de rendu des composants enfants va également être exécutée. Donc, nous pourrions penser à cela comme maintenant le composant calculé, le vert sur la gauche ici, puis le bleu ici pourrait être l'un des boutons de la calculatrice. Et donc, lorsque les composants parents, Orender ou calculateurs fonction de rendu a exécuté les composants enfants, abandon est également exécuté et bien nous pourrions cliquer sur l'un de nos boutons. Donc, si le composant enfant est cliqué et qu'il a, comme, une sorte de fonction de clic de poignée et ah, fonction de clic de poignée est venue, puis allez et exécuter un retour cool. Le rappel a été donné à notre enfant par le parent. Et, ah, si ce rappel, puis va et exécute l'état défini à l'intérieur du parent, c'est la chose que nous n'avons pas vraiment couverte avant. Quand à propos d'ici ? C' est vrai. Chaque fois que nous exécutons l'état défini dans un composant, cela provoquera ce composant à nouveau Rendah. Et si ce composant est rendu, alors tous ses petits composants enfants vont rendre une houle et leurs enfants et leurs enfants et ainsi de suite. Ainsi, vous pouvez voir que le réglage de l'état dans la réaction est d'où provient l'interactivité dans notre Web, dans les appareils qui sont implémentés avec la réaction. Donc il n'y a rien de tel qu'un peu de pratique pour vraiment s'en prendre à ça. Alors, nous allons dans le code et utilisons un état quelque mawr. Hé, tout le monde, on est dans notre code avant, mais avant de faire quoi que ce soit ici, il fait chaud de revenir à la calculatrice. Donc, dans notre façon inversée hors de la Floride cours mise à jour la calculatrice. Um, pour que ces composants enfants, ces bas les transmettent des données au composant contenant parent et ce qui le ferait mettre à jour le nombre qui est affiché en haut du calcul ici. Mais comme on peut le voir, ça ne fait pas vraiment ce qu'on veut. C' est un peu fou. Hum, donc je vais vraiment papa, la première chose que je pense qu'il y a quelques choses à réparer. Donc je pense, et la chose que nous voulons faire maintenant c'est qu'il fasse un peu de calcul. Mais la première chose que je pense que nous voulons changer est de se débarrasser de ce zéro en tête au style du numéro. Je n'aime pas ça. Alors, euh, allons dans le coup d'État. Qui vous dans notre composant de calculatrice. Et c'est ce qu'on a fait la dernière fois. Vous pouvez voir ici que nous sommes juste sur la prochaine valeur de notre malgré un nombre. Et puis en rappelant ce début dit état pour définir un numéro d'affichage 2 autour de vous , Um, Um, ce qui est que j'ai dit, Eh bien, c'était bon. Cela nous a bien servi auparavant, mais maintenant je pense que nous voulons faire quelque chose d'un peu différent. Je pense que ce que nous allons faire, c'est regarder, je pense que nous allons commencer par le genre de solution naïve , ce qui est comme la première chose que j'aurais trouvée quand je me suis assis pour faire ça. Je ne suis pas un fan de Jude ou de code ou quoi que ce soit. La réponse finale d'abord, comme si c'était la toute première solution que la programmation a rencontrée. Je pense que c'est vraiment le cas de Mr Done It, comme le même programme exact 10 000 fois ne sort jamais comme ça pour moi. Si c' est le cas pour toi, je suis jalouse. Mais de toute façon, donc sans nouveau numéro d'affichage, je pense que ce que nous allons faire est que nous allons tester la valeur. Donc si la valeur est égale à zéro, alors nous dirons, hum, vous direz que bien, vous jouez juste nombre est la vérité égale que vous maux. Nous ferons notre numéro d'affichage habituel, car alors commence ce numéro d'affichage duh plus la valeur. Ok, et ensuite on est assis sur notre numéro d'affichage. Espérons que tout ira bien. C' est recharger une calculatrice et montrer zéro clic droit sur un et ne fait rien . Excellent. C' est parce que j'ai fait le mauvais test. Numéro d'affichage hilarant. Tout ce qu'ils disent à propos de tout faire bien. D' abord. Bon sang, hum , évidemment, je n'ai pas encore fait ça 10 000 fois. Donc de toute façon, ce que nous voulions vraiment vérifier c'est si notre numéro d'affichage actuel est égal à zéro, puis si c'est bouddhiste, remplacez-le par notre nouvelle valeur. Sinon, nous allons commencer une attente, donc avons enregistré ce rechargement. Et je clique sur un et est à 153 multiplié. Eh bien, ce n'est pas ce qu'on veut. Mais c'est le prochain mouvement du livre qui va résoudre. Allons entrer. Et donc douze n'est pas l'âme. C' est l'ajout d'implémentation. Donc ça va regarder ces gars. Donc on a, genre, genre, on va mettre en place l'addition, ce qui signifie changer comme deux boutons. On va devoir faire plus bouton, faire quelque chose de différent. Je vais devoir faire quelque chose de différent à notre bouton égal. Donc notre bouton plus va devoir faire quelques choses. Il va falloir enregistrer le fait que nous voulons ajouter quelque chose, et nous allons aussi devoir, hum, stocker notre numéro d'affichage actuel comme premier opérandi. Donc, je pense que je vais appeler cette fonction compte séparé ? Oui. Pour toujours et compter. Et ça prendra environ deux. Mais je devrais appeler cette opération parce que c'est l'opération que nous voulons réellement effectuer, même si nous ne l'effectuons pas encore. On a des performances parce qu'on n'a pas ce deuxième numéro à ce stade quand quelqu'un appuie. En plus, il n'y avait qu'un seul numéro. Ah, et où, euh et nous ne mettons pas en œuvre notre vie. Calcul post-correctif. Ah, dans ce devait être Ah, drôle, genre, juste pas intéressant. Bref, à la maison. Donc, ce que nous voulons faire est de définir une sauvegarde d'état. Vous démarrez City, état et un peu d'objet JavaScript là-bas et nous allons tout dire. Coopération et nous le mettrons en service. Et nous voulons stocker le numéro d'affichage comme premier opérandi. Donc, nous aurons une offre et une, et cela sera réglé sur ce numéro d'affichage de l'état de pensée. Ok, cool. Et puis ce qui arrive à afficher le numéro s. Donc c'est là que notre première solution naïve revient pour nous mordre un peu. On ne peut pas s'asseoir sur le numéro d'affichage comme si on ne pouvait pas le laisser tel qu'il est. Sinon, nous allons commencer à faire un grand grand nouveau numéro Donc pour l'instant, nous allons le mettre à zéro. Ah, ouais. Zéro. Ok, alors on y va. Et ce qu'on peut faire, c'est aller au bouton Julie Little Plus, et quand ça s'exécute, c'est dire, Hey, exécuter la préparation, Cal. C' est une chose que j'oublie ici. Caractère fait beaucoup de références. Teoh vire, et c'est une fonction de rappel. Donc, bien sûr, nous devons l'ajouter ici. Brett compte. Merci un comptage. Très bien. Dit, c'est notre bouton d'ajout en prenant soin. Qu' en est-il de la façon dont le bouton est égal à faire le bouton de calcul. Donc, mais cela voudra faire est de nouveau définir un état, um, et faire un calcul pour que je les affiche mais montre le résultat hors tout ce qui est dans numéro d' affichage et notre première offre et l'opération que nous avons stockée. Donc j'appellerai cette nouvelle fonction Duke Colak, Cal um, sur tout ce qui doit prendre une dispute et parce que je suis comme le champion du monde à oublier de le faire, je vais aller tout droit et mettre ça dans un étant lié à l' instance actuelle car il va juste m'ennuyer quand j'oublie de le faire correctement. Ok, alors qu'est-ce qu'on va faire maintenant ? Eh bien, nous allons d'abord, je suppose qu'il faut que je sache ce que nous voulons faire. Donc, vous commencez à rester opérationnel, et je suppose que la moitié 1er 1 sera édition. Vraiment ? droite. Et nous allons voter droit, mettre une pause après la faute. Parce que, bien sûr, dans la tâche sauter par défaut peut apparaître n'importe où dans l'instruction de cas. Et donc je suppose que ce qu'on veut faire, c'est établir un état. C' est l'état. Et que voulons-nous le faire ? Demandez une date. Eh bien, je pense que nous en avons fini sans opérations. Cela définira l'opération sur undefined. Et nous allons définir le numéro d'affichage sur la flûte Aziz. Maintenant, comme je l'ai dit, je ne suis pas vraiment dans la présentation de la solution finale en premier. Mais je vais te sauver. Que la douleur de moi, travailler à travers les différents problèmes de ne pas faire cela fondamentalement, parce que nous travaillons avec des cordes. Ah, quand il les quitte en nombres pour en faire un peu plus avec eux. Bien sûr, si nous venons de dire passer flotteur, est cette marque d'état un Plus que ce numéro d'affichage, alors , bien sûr, notre petit symbole bulle plus pourrait Karen huit Ces conseils boissons et nous donner résultat ridicule. Bref, euh, et enfin je pense qu'on veut se débarrasser. Eh bien, réinitialiser opéré un pour au-delà de la trouvaille. Ok, disons ça. Et enfin, nous devons descendre, et notre bouton chat, euh, est égal à Teoh Do Count. Ok, alors qu'est-ce qu'on pense qu'il va se passer ? Est-ce que ça va marcher ? Allons le découvrir. Fais-le. S' en est appuyé. Je veux dire un plus Teoh parce que 30 mon dieu, il a mis en œuvre Addition. Super excitant. Et maintenant, bien sûr, si je tape 333 0 Dieu. Eso Vous voyez, notre, notre, hum, l'initialisation des numéros d'affichage ne fonctionne pas vraiment pour nous. Et nous avons d'autres boutons qui ne se comportent pas encore de façon sensée. Donc, dans son ensemble, y compris l'exercice. Je vous encourage assez à aller de l'avant et à mettre en œuvre la multiplication et la soustraction des divisions ensuite dans votre propre temps. Hum, la date a commencé, comme, complètement lâché. Je ne fais pas ça moi-même, parce que dans une petite sorte de code intérimaire, entre les conférences, je vais continuer, les mettre en œuvre moi-même. J' ai donc hâte de vous voir à la prochaine conférence. 9. Faites le calcul !: Ok, tout le monde. Eh bien, comme je l'ai dit dans la conférence précédente, ça va être un coup d'envoi rapide de la mise en œuvre des opérations restantes dans notre calculatrice, c'est-à-dire la multiplication des divisions et la soustraction. Jetons donc un coup d'oeil à notre code. Si vous vous souvenez, nous avons cette fonction appelée Duke ALC, qui est en train de mettre en œuvre l'ajout. Et en plus, nous passons à travers et des ensembles de véhicules qui, hum, mettent à jour l'état dont nous avions l'habitude de garder une trace. Nous étions à la hauteur dans leur opération et finalement changé très bien. donc clair que c'est ici que nous voulons mettre en œuvre les autres opérations. Mais je vais faire un peu différemment. Je pense que oui. Ce qu'on va faire, c'est faire sortir ce type. Comment déclaration de cas. Il a un état d'appel et met ces éraflures et une chose supérieure encore et encore. Donc, ce que nous allons faire à la place est de créer cette petite variable. Dites, laissez vous pouvez numéroter initialiser à 20 Je pense qu'il est sur et, vous savez, cas off addition. Eh bien, nous venons de nouveau malgré le nombre et nous allons le définir. Teoh. Ouais, allez, ça en fait une déclaration. Très bien. Et maintenant, en bas, je suis sûr que tu peux voir ce qui va se passer. Vous êtes juste très nombre. Je peux dire. Donnons juste cela un test rapide et un calcul connexe. Je m'assure que l'addition fonctionne toujours. Blast cinq 10. Excellent. , Ce qu' il nous faut maintenant,c'est trois autres déclarations de cas qui mettent en œuvre nos autres opérations. Sobel dio soustraction sur division et multiple. Euh, OK, alors où sommes-nous ? Bon et est devenu assez simple. Vous savez, si nous avions si nous avions 1000 de ces opérations à faire, nous le faisons un peu différemment. 1000 de ces opérations à faire, Serait de passer la fonction autour au lieu d'avoir une instruction de cas. Mais je pense que ça va faire pour notre petite calculatrice. Et je vais m'assurer qu'on a toutes leurs opérations au bon endroit. Oui, je crois que oui. Comment jamais ? Eh bien, nous ferions mieux de le faire. Dans le cas de la division, je regarde vous dire que ce qui est sorti n'est pas un numéro, et nous allons laisser tomber. J' ai entendu parler de la division par zéro, et je pense que nous allons frapper cette vie pour le moment. Hôpital, aboutissant à un meilleur destin. Droit ? Mais cela ne va pas fonctionner encore clairement parce que nos différents boutons et ne pas utiliser notre nouvelle fonction. Allons donc faire de la musique une nouvelle fonction. Excusez-moi, Excusez-moi, puis-je douter ? Même à l'intérieur. Droit ? Rechargez la calculatrice et nous allons lui faire un test. Donc, je dirais six multiplié par trois égaux Atteindre. Soustraire. Six ego 12. Divisé par deux. Six. Enfin, assurez-vous que l'ajout fonctionne toujours. Sept aujourd'hui. Ok, super. Donc, ce fut une course rapide à travers la mise en œuvre du reste des opérations sont notre calculatrice. J' ai hâte de vous voir à la prochaine conférence. 10. Le cycle de vie de composant React.: Tout le monde a dit qu'il est temps de jeter un oeil à la composante du cycle de vie du réacteur, et la première chose que nous allons faire aujourd'hui est de découvrir ce qui avait utilisé le cycle de vie des composants du réacteur, et ensuite nous verrons comment nous pouvons l'utiliser. Tout le monde a dit qu'il est temps de jeter un oeil à la composante du cycle de vie du réacteur, et la première chose que nous allons faire aujourd'hui est de découvrir ce qui avait utilisé le cycle de vie des composants du réacteur , Alors qu'est-ce que c'est ? Eh bien, c'est hors fonctions d'un Siri dans un composant bref qu'un rhume à différents stades de son cycle de vie. Peut-être que c'est un peu explicatif, mais de toute façon, c'est ce qu'ils sont. Nous avons le constructeur qui a vu si le composant Wilm est sorti, nous avons un composant. A monté. Nous avons un composant. Recevoir les accessoires doivent composant de rendu mise à jour du composant fait la mise à jour et le composant Will Matt. Maintenant, c'est beaucoup de choses. Ah, c'est facile de penser à eux. Ah, en termes de montage et de montage. Ces quatre fonctions actuellement mis en évidence à faire avec le montage sur et um, fusion afin de construire un composant montera le composant fait monter et le composant sera pourri avec être chargé dans le navigateur pour la première fois, ou étant retiré du navigateur, puis ceux-ci au milieu ici, ils ont dû faire avec le rendu si physique à chaque fois que le composant re rend. La plupart d'entre eux ne sont pas appelés sur l'Orender initial en plus de la fonction de rendu réelle. Euh, mais c'est encore beaucoup à voir avec. Donc, ce sont ceux que j'ai vus utilisés le plus dans la pratique. Maintenant, nous avons vu la fonction constructeur déjà utilisée. Nous avons vu le rendu utilisé, et cela laisse ces trois autres composants ont monté. Si la mise à jour du composant et le composant s'élèvent, composant a donc monté. C' est un bon endroit, hum, pour configurer des choses comme, ah, requêtes réseau asynchrones. Arrêtez les minuteries que le composant a besoin de choses comme ça. Ce sont juste des choses qui doivent être en place ou pour commencer avant qu'il n'arrive réellement sur la page. Si la mise à jour du composant sera à la recherche si la mise à jour du composant, vous savez, le code. Mais brièvement, c'est un moyen de vérifier si le réacteur devrait vraiment aller à la difficulté, rendant notre composant dans le dom. Parce que même si réagir est célèbre pour le rendu, si nous pouvions l'éviter, c' est assez bon sur Finalement, composant va s'élever. C' est un endroit pour ranger toutes les connexions réseau non terminées, annuler les minuteries, des trucs comme ça. Mais nous allons aller et implémenter Devrait la mise à jour du composant OK, donc nous sommes ici dans notre code, assis juste au-dessus de la fonction de rendu pour le composant de la calculatrice. Il est là. Calculatrice. Il me semble que je devrais rendre ça un peu plus grand pour toi. On y arrive. Ok, donc il est dehors, vérifie à propos d'un composant et c'est une fonction différente, et il est Renda, et on va mettre la mise à jour du composant juste ici. Et il faut deux paramètres suivant, peut-être, et l'état suivant. Donc, à l'époque, cela devrait la mise à jour du composant est appelée. Nous avons encore nos anciens accessoires dans notre ancien état à notre disposition afin que nous puissions référencer les gouttes de stock . Ce n'est pas l'état. Et c'est une excellente occasion de vérifier si quelque chose d'important a changé. Et si ça n'a pas changé, alors le pied n'est pas nommé. Rendu n'importe quoi sur stupide. Nous indiquons qu'Orender devrait ou ne devrait pas se produire en retournant true ou false. Donc maintenant que nous avons cette fonction ici, nous aimons juste retomber jamais rendre. C' est ce qu'on dit ici. Et nous voici dans une maison sans donner un peu de rechargement de suivi et je peux cliquer. Je clique sur ces choses et rien ne change, vous savez, calculatrice, calculatrice, parce que la mise à jour du composant retourne false. Et si nous allons retourne vrai, rechargez. Et nous voilà, travaillant comme d'habitude. D' accord, mais ce n'est pas ce qu'on veut faire. Ce qui nous intéresse vraiment, c'est notre numéro d'affichage, parce que c'est tout ce qui va vraiment indiquer si nous devons re rendre ou non. n'y a rien d'autre qui change sur la page. Donc, nous pourrions dire, si ces pensées que le numéro d'affichage est égal au prochain numéro d'affichage du point ST, alors tourner vers le haut que Jane Fells autre tour. Ok, donc nous disons que c'est très bien, mais nous ne pouvons pas faire la différence entre, euh la mise à jour du navigateur et ne pas mettre à jour si exactement la même valeur va être dans l'affichage de notre calculatrice. Donc, nous ferions mieux d'aller et de mettre l'alerte ennuyeux ici et de dire de ne pas mettre à jour. furrow sont comme ça. Dites-vous bien. Revenons. Chaque ici, faites un rechargement. Ok, donc si tu dis un Eh bien, euh, est égal à dire, hum quatre plus zéro. Et puis nous avons cette petite alerte disant que nous ne mettons pas à jour le navigateur. Il y avait un zéro avant. C' est zéro. Là. Maintenant, on ne va pas faire de travail sauf montrer ça ennuyeux un peu que je ne peux pas me contenter d' en sortir . Et c'est donc une mise à jour très simple ou un composant alimentaire pour voir si ah, nous pourrions aller à la peine de mettre à jour le navigateur ou non. Et, euh, il y a quelques points importants à propos de la mise à jour du composant devrait être que l'utilisation de la mise à jour du composant devrait changer à l'avenir. Facebook a dit qu'il sera traité comme une suggestion à l'avenir. Je viens de faire un tribunal avec mes doigts suggestion si réactive mon il décide qu'il sait mieux que vous sur si quelque chose devrait mettre à jour ou non. Euh, surtout comment ça se passe dans le futur. Je ne l'ai pas fait. autre chose importante à retenir est que cela pourrait être une source de bogues parce que pas comme il n'y a rien d'autre qui pourrait être une source de bogues dans notre code. Mais celui-là en particulier peut être parce que ça va seulement vérifier les accessoires en état. Et si vous basez votre rendu sur autre chose que des accessoires dans l'état que cette fonction vous sera pas utile parce que si vous obtenez des données dans votre rendu de l'extérieur de la réaction, un P I, um, obtenant le résultats de petites requêtes réseau ou un dieter global ou quelque chose comme ça , alors vous ne pouvez pas vraiment utiliser devrait souligner que pour dire si vous avez besoin ou non de rendre. Donc, soit vous allez tout baser sur des accessoires dans ST dans le rendu, soit vous n'allez pas utiliser cette fonction. 11. Exercice de codage de React #1: Je pense, tout le monde. Oui, il est temps de faire des exercices. Temps d'antenne en particulier pour les exercices de codage. Tu n'as pas besoin d'un costume Rex pour ça. Il s'agit donc de deux choses exceptionnelles que nous devons faire. L' un d'eux est Teoh. Corriger cette affaire où nous faisons la multiplication, disons, et nous cliquons. L' affichage du bouton de multiplication revient à zéro. Une calculatrice régulière ne ferait pas ça. Il laisserait juste les huit là-haut, et ensuite on en haut le numéro. Nous obtenons toujours le résultat de ce sommet fait. On peut s'y attendre, mais c'est plutôt grossier que nous ayons zéro là avant de faire autre chose. Donc, en tant qu'exercice pour vous, je vous invite à mettre en œuvre une solution pour ce petit problème particulier. Alors arrêtez la conférence. Ayez ah, réfléchissez et faites un gala. Ça et, euh, je vais te montrer ce que j'ai trouvé une fois que tu reprendras plus tard. Ok, donc nous voilà et Ah ha. Quoi ? Il a vu un peu qui ? Le site dans son code. Euh, mon code. Je pourrais difficilement te demander d'assumer la responsabilité de ce que j'ai ici. Mais maintenant, réglage initial de l'état ignore en quelque sorte le fait que nous avons un autre état à prendre en charge en plus du numéro d'affichage. Et donc je pense que nous allons faire est fini et ce n'est pas défini. Et je voulais en offrir une en opération que je ne peux pas refaire parce que ce genre de plomb dans ce que nous devons faire maintenant. Quoi qu'il en soit, qui est notre numéro de mise à jour ? Ici, c'est. Donc c'est avoir Ah, je regarde que je ne peux pas afficher le nombre et voir s'il est zéro et s'il le remplace par la nouvelle valeur, sinon il commence une valeur en attente pour ne pas afficher le nombre, ce qui est, vous savez il était un peu OK résoudre le problème un peu pour nous, mais nous pourrions faire mieux, je pense qu'il est approprié d'utiliser la valeur voleur hors malgré le numéro deux. Décidez s'il doit être remplacé ou annexé à, car c'est vraiment une question de chemin. Nous sommes à la hauteur de vos calculs. Donc je pense qu'on aura un petit drapeau et que je l'appelle le numéro comme Ok, ça pourrait être égal à faux. Mais en fait, ce serait vrai quand nous avons réellement quand la calculatrice a été créée, quand le constructeur ici, nous sommes sortis et que vous avez un drapeau dit que c'est vrai. Et donc quand nous allons mettre à jour le numéro au lieu de tester pour voir si le nombre Espagne est zéro, je dirai ce point ST vous du drapeau. Et si ah, on commence et que vous comptez alors, oui, on fera le remplacement. Sinon, nous dépendrons. Et, bien sûr, veut sciemment introduire un drapeau. On va tous les états pour s'occuper de tout le monde. Peu importe. Ok, alors qu'en dites-vous ? Le film est maintenant faux. Un autre endroit où nous avons besoin de Teoh faire quelque chose avec un nouveau numéro. Drapeau est en préparation Kout parce que c'est là que nous réinitialisons notre numéro d'affichage. Et nous vous disons maintenant que Flug est faux. Mais, tu sais, on ne va pas réinitialiser par numéro. Maintenant, nous allons le laisser continuer à afficher tout ce qu'il affichait précédemment. Ouais, et donc dans ce numéro de cas, Flug sera maintenant que je devrais être vrai. Pas pour nous. Euh, et donc là-haut, on va descendre par ici. Était avoir un autre film est vrai. Et nous vous remplacerons. Juste un numéro simple. Même s'il s'affiche, dites-moi que ce n'est pas le faire. Disons ça et voyons comment on doit recharger la calculatrice. Et s'il est un deux multiplié par deux, est égal à pour excellent et puis était un plus. Trois ont dit que c'était résolu notre petit problème avec la réapparition du zéro après avoir touché un bouton d'opération. 12. Exercice de codage de React #2: Ok, donc maintenant c'est l'heure de l'exercice numéro deux. Et dans ce cas, nous avons ce bouton C ici, qui est toujours un peu de ne pas faire quelque chose d'utile et a le pouvoir de sortir calculatrice dire, si je l'étais parce que c'est assez drôle, en fait. Mais vraiment, nous voulions juste réinitialiser notre calculatrice comme un nouvel exercice de coupe. S' il vous plaît aller de l'avant et mettre en œuvre le bouton mer hors cours. Oui, je vais le faire maintenant, alors s'il vous plaît pause plus tard et, euh mettre en œuvre vous dites. Mais tu peux comparer ce que tu as fait à ce que je suis sur le point de dio. Ok, donc tu vois, heure du bouton. Ici, c'est dans notre calculatrice. À peine voir le bouton de rapport appuie toujours égal au numéro de mise à jour. Ce que je pense que nous ferons, c'est que nous le ferons. Um ouais. Ecoute, je pense que nous aurons, genre, une fonction d'état par défaut, parce que c'est vraiment ce que nous faisons. Nous remettons tout à la façon dont nous nous attendions à ce que ce soit lorsque la calculatrice est la première inst enshi ated. Je pense que je vais juste, genre, totalement délictuel sur l'endroit où je devrais mettre cette fonction, euh, amusant. Et je l'ai mis ici, et on le fera toute la nuit. Vraiment ? Parce que c'est le Ceci n'a rien à voir avec Ah, l'instance actuelle de la calculatrice. Eso devrait être une fonction extatique. Obtenez bien dire les états par défaut qui étaient une fonction d'état par défaut. Maintenant, il est parti. Ce qu'on va faire, c'est retourner quelque chose qui ressemble exactement à ça. Tu as ce lot, non ? Eso ce que nous pouvons faire ici maintenant c'est que vous pouvez voir la pratique pour nous est que nous pouvons venir ici et dire Jack, vous aide à la calculatrice. Tu lui as posé ça ? Ah, l' état des gens. D' accord. Et, euh, et puis, bien sûr. Eh bien, l'homme s'est étendu hors de contrôle. Enfin attendu, Pourrait affaiblir venu ici après la préparation de la vache et faire parler, nous pouvons dire comme, hum faire KLIA et nous pouvons dire ces trucs. C' est cet état. Euh, c'est ça pour l'état. Donc parce que nous savons qu'il n'y a pas de défaut. State est un objet javascript. On pourrait juste le passer pour définir l'état de cette façon, et enfin, sans bouton c, sans bouton c, affaiblir Say, est-ce que je le vois ? Oh, mais bien sûr, n' oublions pas. Est-ce que tu vides ? Elle doit être incluse, et il a construit qu'elle soit liée à elle. Nous allons donner cela à compter. Ensuite, nous dirons cinq multipliés par six bacon. Stabilité et clarté, n'est-ce pas ? Ensuite, nous allons jeter un oeil à ce qui est clair fait vache Qué tour. Ok, Um, Je Lordy Calle Que tard ou Ok. Donc, ce gamin de conseil méchant 555 et clair et est retourné à 06 pieds de large par neuf. Ah, j' ai cliqué ? Multipliez Sisi ni multiplié par neuf parce que ce jeune pour nous, non ? Bref, donc nous l'avons. Nous avons implémenté comment bouton clair. C' est tout pour les exercices de codage pour aujourd'hui. Et j'ai hâte de vous voir sur la photo suivante. 13. Je suis déjà raté !: Eh bien, c'est tout pour la classe. Tout le monde. J' espère vraiment que vous l'avez apprécié et apprenez quelques informations utiles. J' ai vraiment aimé l'enseigner et j'ai hâte de voir votre projet de classe. Alors s'il vous plaît, souvenez-vous de cela. Postez-les dans la galerie des projets. Si vous rencontrez des problèmes pendant la classe, faites-le moi savoir dans la zone de discussion et je vais entrer et vous aider le plus rapidement possible. D' ici là, j'ai hâte de vous voir la prochaine fois.