React pour les débutants : Créer une application et apprendre les principes de base

1. Introduction: Ma passion pour le développement web, vient certainement de mon amour pour la résolution de problèmes. Il y a quelque chose de très satisfaisant à prendre un problème et à le plier à vos testaments sur le code. Salut là. Je suis Ryan Johnson. Un développeur web du Canada, où j'ai eu le privilège de travailler dans l'industrie de la technologie depuis 15 ans maintenant. Au cours de cette période, j'ai eu la chance de travailler dans une variété d'endroits différents, allant des petites startups aux grandes entreprises. Aujourd'hui, je veux vous présenter l'une de mes bibliothèques préférées avec lesquelles je travaille, React JS. Non seulement React JS est soutenu par Facebook, mais il a également l'une des communautés de développement les plus dynamiques. J' ai commencé à utiliser React il y a trois ans et je n'ai pas regardé en arrière depuis. Pour moi, React rend le développement de l'interface utilisateur plus amusant. Réagir apporter un peu d'ordre nécessaire pour le développement d'interface en vous permettant de diviser votre interface en composants propres et agréables. Ce cours, est orienté vers les développeurs qui tous prêts ont une bonne compréhension de JavaScript, mais veulent prendre React. Beaucoup de nouveaux arrivants à React, ont tendance à être accrochés sur des dépendances externes comme Webpack, et Redux, et Babel, et linting, et tests, et ainsi de suite. Ces leçons, je vais éviter ces distractions et coller aux fondamentaux de React, puis vous guider dans la création de votre première application. Pour terminer les choses, je ferai de mon mieux pour découvrir comment React fonctionne et ce qui le rend si efficace. Si vous êtes comme moi et que vous voulez comprendre ce qui se passe sous le capot et les outils que vous utilisez, ces leçons sont pour vous. Je suis super excité de vous présenter React et j' espère vraiment que vous aimez travailler avec ça autant que moi. Allons-y et commençons. 2. Introduire des codes et: Avant de commencer, je veux vous présenter un puissant éditeur de code en ligne appelé CodeSandBox, que nous utiliserons pour la plupart de ces leçons. Je vais commencer par créer un nouveau projet en cliquant sur Créer Sandbox. Comme vous pouvez le voir, CodeSandBox prend en charge non seulement React, mais aussi de nombreux autres frameworks populaires. Je vais aller de l'avant et sélectionner le projet React, et en un seul clic, j'ai maintenant une application React pleinement fonctionnelle en cours d'exécution dans mon navigateur. CodeSandBox m'a permis d'ignorer la configuration et de me concentrer sur les fondamentaux React que nous sommes ici pour apprendre. La première chose que je vais faire, puisque j'ai déjà un compte est de me connecter à CodeSandBox en tant que compte GitHub. N' hésitez pas à créer votre propre compte afin que vous puissiez suivre les cours. La dernière partie de l'éditeur de CodeSandBox est assez standard et fonctionne de la même manière que les éditeurs de code les plus populaires là-bas aujourd'hui. Vous avez votre navigateur de fichiers. Nous pouvons voir tous les fichiers et répertoires du projet. Comme vous pouvez le voir, CodeSandBox est allé de l'avant et a déjà créé des fichiers pour nous. Si je veux ajouter un nouveau fichier ou répertoire, je peux utiliser les boutons ici en haut. Sous l'éditeur de fichiers, nous avons la section Dépendances. Ceci affiche toutes les dépendances NPM installées pour le projet. Vous pouvez voir que CodeSandBox a déjà installé quelques dépendances React pour nous. L' ajout de nouvelles dépendances est également facile. Il suffit de cliquer sur Ajouter une dépendance, de rechercher celle que vous voulez, puis de cliquer dessus pour installer. Un simple clic sur un fichier s'ouvrira en mode aperçu, tandis que le double clic sur un fichier ouvrira le fichier en mode édition. Vous avez peut-être remarqué sur la droite quelque chose qui ressemble à une fenêtre de navigateur. Il s'agit d'une vue en direct de l'application qui se rechargera automatiquement lorsqu'un fichier change. Pour démontrer, je vais aller de l'avant et mettre à jour notre h1 pour dire Hello React Beginners. Maintenant, vous pouvez voir, dès que la mise à jour est terminée, il se met automatiquement à jour ici sur la droite. Enfin, je veux vous montrer la console intégrée de CodeSandBox. Cela imite à peu près la fonctionnalité de la console de votre navigateur. Donc, si je vais de l'avant et que la console déconnecte quelque chose, je peux voir la console des sandbox de code d'audition pair. Et tout comme la console du navigateur, je peux aussi exécuter des commandes. Si je vais de l'avant dans Alert qui dit Bonjour à partir de la console, vous pouvez voir qu'il est exécuté et apparaît ici en haut du navigateur. Assez de notre bac à sable de code déjà. Nous sommes là pour en apprendre davantage sur React. Mais cela étant dit, allons-y et commençons. 3. Principes : composants: Quand il s'agit de réagir, c'est tout au sujet des composants. Les composants sont probablement ma partie préférée du développement d'une réaction. Avec les composants, vous pouvez prendre n'importe quelle interface utilisateur et la diviser en morceaux plus petits et réutilisables qui peuvent fonctionner indépendamment les uns des autres. Par exemple, prenons l'interface Sandbox de code dans laquelle nous travaillons et réfléchissons à la façon dont nous pourrions le diviser en composants. En ignorant les zones d'en-tête et de pied de page, je vois le potentiel de trois composants de niveau supérieur. Un composant Explorateur de fichiers, un composant Éditeur de fichiers et un composant Fenêtre de navigateur. Chacun de ces composants peut également être constitué de ses propres composants. Par exemple, le navigateur de fichiers dispose d'un menu accordien qui pourrait être son propre composant et chaque élément à l'intérieur de l'accordien, peut également être un composant. Si vous voulez aller plus loin, chaque icône Items peut même être un composant. Casser votre interface utilisateur en petits composants gérables comme celui-ci a toutes sortes d'avantages, y compris rendre votre code plus facile à réutiliser et à tester. Mais nous ne pouvons pas parler de composants sans mentionner les éléments. Un élément est le plus petit bloc de construction et réagit et décrit ce que vous voyez éventuellement à l'écran. Pour démontrer, je vais commencer par créer un simple élément H un. À l'intérieur de cet élément, j'aurai du texte bonjour et je l'inclurai dans les composants de l'application que nous pouvons rendre à l'écran. C' est un exemple d'élément très simple, mais les éléments peuvent aussi être plus complexes. Voici un exemple d'élément plus complexe nommé wrapper qui est composé d'un div avec du texte de paragraphe à l'intérieur. Vous pouvez considérer les éléments comme les blocs de construction utilisés pour assembler vos composants. Alors, à quoi ressemble un composant ? Un composant dans sa forme la plus simple n'est qu'une fonction. Par exemple, disons que nous avions une simple fonction d'ajout qui prenait deux paramètres et retournait la somme de deux valeurs. Vous pouvez voir si je passe la fonction add deux et deux, je reçois quatre journaux à la console. Si je change ce deuxième paramètre dix, je reçois 12 dans la console. Mais ce qui est vraiment cool, c'est que nous pouvons facilement convertir cette fonction d'ajout pour être un composant de réaction à la place. abord, utilisez une majuscule A pour le nom de la fonction du composant car tous les composants doivent commencer par une lettre majuscule. C' est parce que réagir traitera les composants commençant par une lettre minuscule comme des balises DOM. Ensuite, au lieu de prendre deux paramètres, ils prendront un seul paramètre nommé accessoires. Les accessoires sont la façon dont vous transmettez des données dans votre composant. Un composant est une fonction immuable, ce qui signifie que tant que vous lui donnez la même entrée et réagit les accessoires de cas devraient toujours recevoir la même sortie. Maintenant, je peux prendre le composant Add et demander à l'application de le rendre. Pour transmettre les valeurs pour a et b, il vous suffit de les ajouter en tant que propriétés au composant. Maintenant, vous pouvez voir que la somme est rendue à l'écran. En ce qui concerne les composants, réagir offre en fait deux options différentes. Le premier et le plus simple des deux sont des composants fonctionnels, qui est une fonction qui a un paramètre d'accessoires et renvoie un élément de réaction valide. Le composant Add que nous venons de créer comme exemple d'un composant fonctionnel, le second ou les composants de classe, et comme son nom l'indique, le composant sera une classe au lieu d'une fonction. Par exemple, je peux facilement convertir le composant Add en composant de classe. Commencez par convertir const en classe. Ensuite, ayez l'étendue de la classe du composant point de réaction. Ensuite, ajoutez une fonction de rendu et faites retourner l'élément à la place. Enfin, puisque props est maintenant une variable d'instance, ajoutez-la devant. Là, vous l'avez, un composant de classe. Mais la sortie ressemble exactement à la même chose qu'avant, ce qui soulève la question de savoir pourquoi utiliser un composant de classe du tout ? Il se trouve qu'il y a une très bonne raison, seuls les composants de classe ont accès aux méthodes d'état de réaction et de cycle de vie. Aucune de ces fonctionnalités n'est disponible à partir de composants fonctionnels. Ne vous inquiétez pas, nous allons entrer à la fois dans l'état et les méthodes de cycle de vie plus tard. Une autre caractéristique agréable des composants est l'accessoire pour enfants. Par exemple, disons que je voulais créer un composant de mise en page réutilisable. L' idée étant que toutes mes pages affichent les mêmes En-tête et Pied de page. Mais l'un ou l'autre passe dans une copie de corps différente pour chaque page. Alors, comment puis-je faire ça ? Entrez les accessoires point enfants. Maintenant, je vais rendre le composant de mise en page, mais au lieu d'une balise auto-fermante, je vais utiliser une balise d'ouverture et de fermeture. Ensuite, j'ajouterai quelques éléments de paragraphe pour cette copie du corps des mises en page. Tout comme ça, nous pouvons voir que ma copie corporelle est rendue entre mon en-tête et mon pied de page. Vous pouvez considérer les accessoires que les enfants sont un espace réservé pour tout contenu que vous incluez entre les balises d'ouverture et de fermeture lorsque vous effectuez le rendu de votre composant. Je vais aller de l'avant et ajouter un autre composant de mise en page, mais cette fois je vais passer dans une copie de corps différente. Parce que la mise en page utilise des invites point enfants, je suis capable de transmettre une copie de corps différente au même composant de mise en page. C' est une fonctionnalité très puissante qui vous permet d'écrire des composants qui ne nécessitent aucune connaissance des enfants là-bas, y compris. Vous avez peut-être remarqué que lorsque notre composant de mise en page créative, je l'ai enveloppé dans un élément div, même que le composant d'application lorsque j'ai ajouté le deuxième composant de couche. Cela est dû au fait qu'un composant ne doit avoir qu' un seul élément racine à moins d'utiliser quelque chose de réaction appelle des fragments. Pour démontrer que je vais supprimer le wrapper div du composant de mise en page et voir ce qui se passe. Vous pouvez voir dès que je fais que j'ai une erreur. Les éléments JSX adjacents doivent être enveloppés dans une balise de fermeture. À peu près cela signifie que je m'attends à ce qu'un composant retourne un seul élément et que vous m'avez donné trois à la place. Maintenant, il y a un moyen de retourner plusieurs éléments et c' est d'utiliser des fragments comme le suggère l'erreur. Ceci est pratique car il empêche d'avoir à envelopper les éléments et ce qui est une affaire inutile dans ce cas. Pour mettre à jour la mise en page, utilisez des fragments, j'ai juste besoin d'envelopper les éléments dans le composant de fragment de point de réaction. Maintenant, lorsque notre page est rendue, il n'y aura pas d'élément div supplémentaire et notre erreur devrait disparaître. Cela enveloppe tout ce que je voulais couvrir dans les fondamentaux des composants. Ensuite, je vais jeter un oeil à la syntaxe HTML que nous avons utilisée pour écrire nos composants appelés JSX. 4. Principes : JSX: Nous avons encore une chose à couvrir avant de commencer à créer votre premier réacteur, JSX. Si vous vous souvenez plus tôt, j'ai mentionné JSX est une syntaxe HTML utilisée pour décrire les éléments de réaction. Bien que cela puisse ressembler beaucoup à HTML, c'est en fait une extension de JavaScript et la plupart des gens trouvent qu'il est plus facile de travailler avec eux réagit appels API de niveau supérieur comme réagir créer élément. Cela étant dit, il est important de se rappeler que JSX toujours compilé pour réagir aux appels de création d'éléments. Pour démontrer ou utiliser un outil qui nous montre réellement à quoi JSX est compilé. Je vais juste aller de l'avant et copier notre composant d'application. Sur la gauche, vous verrez la version JSX du composant et sur la droite, vous verrez réellement la sortie du compilateur de ce composant. Si nous examinons de plus près la version compilée du composant, vous pouvez réellement voir qu'elle est composée de plusieurs appels à React.CreateElement. Chacun de ces appels correspond à un élément dans le composant JSX. Nous avons notre appel principal de création d'élément de réaction, qui est un div, qui revient à notre div principal ici. Cela a un nom de classe d'App, et puis il a aussi quelques éléments enfants, un h1 et h2, que nous voyons tous les deux représentés ici par deux autres appels pour réagir créer élément. En comparant ces deux versions du même composant, je trouve que la version JSX est beaucoup plus facile à lire. Je pense que cela sera vrai pour la plupart des développeurs qui sont familiers avec HTML. Toutes les leçons à suivre utiliseront JSX. Mais je voulais montrer ce qui se passe sous le capot lorsque vous créez un composant JSX. La vraie beauté de JSX est qu'il vient avec la pleine puissance de JavaScript derrière lui. Commençons par quelques fondamentaux JSX, d'abord, l'intégration d'expressions. Maintenant, tout cela semble vraiment fantaisie, mais nous avons déjà travaillé avec une expression ici. Notre props.version qui est rendue à l'écran est une expression. Dans JSX, vos expressions seront simplement enveloppées dans des accolades. Le contenu des accolades est ce qui est réellement évalué. Dans ce cas, nous sortons simplement la valeur de props.version à l'écran. Avant de continuer, je veux faire un couple de torsion rapide CodeSandBox. Nous allons commencer par réduire notre éditeur de fichiers en cliquant sur l'onglet éditeur de fichiers. Ensuite, je vais juste rétrécir notre fenêtre de navigateur un peu ici sur la droite. Maintenant, je vais aller de l'avant et mettre à jour notre expression, qui rend réellement un message conditionnellement basé sur la valeur de la version. Si la version est supérieure à un, je vais afficher un message indiquant la version non valide. Si la version est inférieure ou égale à un, alors je vais réellement rendre le props.version comme nous le faisions auparavant. Je vais de l'avant et mettre à jour une version à deux points bien que, vous pouvez maintenant voir que nous avons effectivement un nouveau message, version invalide rendue à l'écran. Comme vous pouvez le voir, nous n'avons pas eu à faire quelque chose de spécial ici pour que ça marche. Ceci est juste un simple ancien opérateur ternaire JavaScript qui rend un message ou un autre en fonction d'une condition. C' est ce que j'aime à propos de JSX, c'est juste JavaScript. Pas besoin d'apprendre un autre langage de modélisation. Maintenant que nous avons fait quelques changements, je vais aller de l'avant et sauver notre travail. Vous avez peut-être su dès que nous enregistrons notre code réellement format automatique. C' est parce que CodeSandBox utilise en fait un outil appelé joliment, qui prend le travail monotone de formatage de code et le fait automatiquement pour vous. Maintenant que nous avons couvert les expressions JSX, passons aux attributs. Lorsque vous spécifiez des attributs et JSX, il existe des différences clés par rapport aux attributs HTML. ReactDom utilise la casse de chameau pour les noms d'attributs. Par exemple, la minuscule sur le clic devient la casse de chameau sur le clic, tabulation minuscule devient l'index d'onglet de casse de chameau. Lorsque vous spécifiez des valeurs d'attribut, vous disposez de deux options. Le premier est des littéraux de chaîne, et c'est assez simple. Le second est des expressions qui permettent de créer des valeurs d'attribut dynamiques comme ça. Juste pour montrer que ça fonctionnait, je vais ouvrir la console ici. Vous pouvez voir que cela est en fait l'évaluation à un index de tabulation de deux. Soyez prudent lorsque vous utilisez des expressions comme valeurs d'attribut, ne pas les envelopper entre guillemets. Cela entraînera que l'expression n'est pas évaluée et traitée comme un littéral de chaîne à la place. Cela conclut les bases de JSX. Mais ne vous inquiétez pas, nous allons entrer dans une utilisation plus avancée de JSX dans les leçons à venir. 5. Créer une application : introduction: J' ai trouvé la meilleure façon d'apprendre un nouveau cadre est de construire quelque chose. Maintenant que nous avons les fondamentaux couverts, je veux vous aider à créer votre première application React. Alors, qu'est-ce qu'on construit ? Pour notre première application, nous allons créer un simple clone Google. Mais au lieu de pouvoir chercher quoi que ce soit, notre Google va chercher des blagues de papa et seulement des blagues de papa. Si je vais de l'avant et entrez « chat », cliquez sur « Rechercher », je récupère une liste de cinq blagues de papa liées au chat. Si j'entre un nouveau terme de recherche et cliquez sur « Rechercher », je peux voir les résultats de recherche sont actualisés avec de nouvelles blagues papa. Enfin, contrairement au bouton « I'm Feeling Lucky » de Google, nous avons le bouton « I'm Feeling Funny », qui retournera une blague de père unique dans ce cas. Bien que cette application puisse sembler assez simple, nous allons couvrir beaucoup de grognement dans la création, alors commençons. Nous allons continuer à utiliser CodeSandBox, l'application créatrice. Mais avant de commencer, je veux commencer par une ardoise propre. Donc, je vais aller de l'avant et supprimer notre travail précédent et commencer avec un joli composant d'application vierge, et ignorer la flèche qui apparaît pour l'instant. Pour commencer, nous allons garder les choses très simples. On va avoir un seul bouton qui, quand on clique, génère une blague de père célibataire. Donc, je vais commencer par créer ce bouton, et je vais l'étiqueter avec « Dites-moi une blague ». Donc vous pouvez voir que nous avons notre nouveau bouton « Dites-moi une blague » est affiché à l'écran ici. Mais quand je clique dessus, il n'y a pas beaucoup de choses qui se passent. Pour gérer les événements de clic dans React, vous utilisez l'événement OnClick. Allons-y et ajoutez-en un à notre bouton ici. L' événement OnClick prend en fait une fonction comme valeur. Donc, nous allons aller de l'avant et ajouter une fonction simple qui déconnecte une valeur lorsque vous cliquez sur. Allons-y et ouvrons notre console ici. Maintenant, vous pouvez voir que chaque fois que nous cliquons sur le bouton « Dites-moi une blague », le mot « click » est enregistré sur la console pour chacun de ces clics. Maintenant que nous savons que notre événement onClick fonctionne réellement, je veux aller de l'avant et déplacer notre gestionnaire onClick dans sa propre fonction. Je vais aller de l'avant et l'appeler OnTellJoke, et il va enregistrer notre clic comme il le fait maintenant. Donc, je vais prendre cette nouvelle OnTellJoke, et je vais remplacer la fonction en ligne que nous avons créée plus tôt, et je vais juste aller de l'avant et économiser. Maintenant, quand je clique sur « Dites-moi une blague », nous devrions toujours voir le clic déconnecté. Maintenant, ce bouton blague ne fait toujours pas grand-chose quand on clique dessus. Ce que nous voulons vraiment arriver, c'est chaque fois que vous cliquez sur le bouton blague, vous obtenez une blague, une blague de papa, spécifiquement. Mais avant qu'on puisse faire ça, on a besoin d'un endroit pour faire des blagues de papa. Comme il y a une API pour tout ces jours-ci, nous allons utiliser une API gratuite de icanhazdadjoke.com pour tous nos besoins de blague papa. Examinons de plus près les documents API pour voir à quoi nous avons affaire. abord, vous remarquerez qu'aucune authentification n'est réellement requise pour ces appels, ce qui est une chose de moins à craindre. Ensuite, vous verrez que l'API prend en charge plusieurs formats de réponse. Dans notre cas, nous ne sommes concernés que par l'option JSON et c'est ce que nous allons utiliser pour notre tutoriel. Pour notre bouton « Dites-moi une blague », nous allons utiliser le point final « Fetch a random papa blague ». La façon dont cela fonctionnera est que chaque fois que le bouton est cliqué, une nouvelle blague aléatoire sera générée et renvoyée à nous. Nous pouvons voir un exemple de la réponse qui sera retourné ici, qui est un objet qui contient la blague avec un ID unique et un code d'état HTTP. Maintenant que nous avons notre point final, revenons en arrière et branchons notre bouton blague. Afin d'appeler le point de terminaison « Random blague », nous allons utiliser l'API Fetch de JavaScript, qui permet de récupérer des ressources sur le réseau. Nous allons passer Fetch deux paramètres. Le premier est l'URL de la ressource, qui dans notre cas est le point de fin « Fetch random blague ». Le deuxième paramètre est un objet options mais nous allons définir la méthode HTTP sur GET car il s'agit d'une requête GET. Ensuite, nous allons définir l'en-tête « Accepter » sur type d'application JSON pour nous assurer que nos données reviennent au format JSON. Appeler « Fetch » renvoie une promesse qui se résout à un objet de réponse. Dans notre méthode « then », nous allons utiliser les objets de réponse construits dans la méthode JSON pour analyser nos données de réponse. Puisque la méthode JSON renvoie également une promesse, nous pouvons simplement enchaîner sur une autre méthode « then ». Cette fois, le rappel sera passé aux données JSON analysées lorsque la promesse résolue juste pour s'assurer que les choses fonctionnent avec déconnecter les résultats. Maintenant, allons-y et ouvrons la console. Maintenant, quand je clique sur le bouton blague, vous pouvez voir que la réponse de l'API papa blague est déconnectée. Puisque nous utilisons le point de terminaison « Random blague », nous obtenons une blague différente si je clique à nouveau sur le bouton. Maintenant que notre bouton de blague fonctionne, ça termine cette leçon. Ensuite, nous examinerons un état clé du composant de fonction React. 6. Créer une application : état des composants: Dans cette leçon, je vais faire une plongée plus approfondie sur l'état du composant. Mais avant d'entrer, reprenons là où on s'est arrêté. Pour récapituler, nous avons un bouton de blague qui récupère une blague chaque fois qu'il est cliqué, et nous avons actuellement enregistré la blague sur la console. Ensuite, je veux mettre à jour nos applications afin que la blague de récupération soit rendue à l'écran. Pour ce faire, nous aurons besoin d'un endroit pour stocker la valeur de la blague de récupération. Dans une configuration sans réaction, vous pouvez penser à stocker la valeur dans une variable comme celle-ci. Quand une nouvelle blague est récupérée, je vais mettre à jour la valeur de la variable blague avec la blague récupérée. Si vous appelez, la blague EPI renvoie un objet. Cela inclut l'ID, la blague et l'état. Au lieu de stocker l'objet blague entier, je vais juste stocker la blague elle-même. Je vais également déconnecter la valeur de cette variable blague, juste pour m'assurer qu'elle est mise à jour. Enfin, je vais ajouter un développement rapide autour de notre bouton, et insérer un élément de paragraphe, puis définir le contenu de ce paragraphe à la valeur de notre variable blague. Essayons ça et voyons ce qui se passe. Nous pouvons voir que notre variable blague est enregistrée dans la console chaque fois que le bouton est cliqué, mais nous ne voyons rien de mise à jour à l'écran. Comment ça se fait ? La raison pour laquelle nous ne voyons aucune mise à jour à l'écran est que React ne sait pas que quoi que ce soit a réellement changé. Un composant React ne sera rendu que lorsque ses invites ou son état ont changé. Dans le cas de notre composant d'application, un rendu se produit chaque fois que la fonction d'application est exécutée par React. Je vais ajouter une console qui s'est connectée à notre fonction d'application. De cette façon, nous pouvons voir quelque chose enregistré chaque fois que le composant est rendu. Comme vous pouvez le voir, le rendu est déconnecté pour le rendu initial des composants. Mais remarquez chaque fois que je clique sur le bouton blague, le rendu n'est pas déconnecté, même si la variable blague est en cours de mise à jour. C' est parce que les modifications apportées à notre variable blague ne sont pas suivies par React, et ne déclenchent donc pas un nouveau rendu. Il semble que si nous voulons des changements de blague de rendu d'application à application, nous aurons besoin de stocker blague dans l'état du composant ou des accessoires. Laquelle utilisons-nous dans ce cas ? Les accessoires sont transmis à un composant et sont en lecture seule, ce qui signifie qu'ils ne peuvent pas être modifiés, où un état contient des informations sur le composant et peut être mis à jour. Cela étant dit, l'état semble être le bon choix car nous aurons besoin de mettre à jour la valeur de la blague au fur et à mesure que nous allons. Puisque les composants fonctionnels n'ont pas accès à l'état, la première chose que nous devrons faire est de convertir l'application en composant de classe. Commencez par changer la fonction de l'application en une classe qui s'étend de React à un composant. Ensuite, convertissez blague en une propriété de classe. Ensuite, nous devrons convertir la fonction OntellJoke pour être une méthode de classe à la place. Ensuite, au lieu de renvoyer directement des éléments, nous utilisons la méthode de rendu et retournons les éléments à partir de là à la place. Maintenant que OntellJoke et blague sont toutes les deux variables de classe, nous devons ajouter ceci devant eux. On dirait que nous rendons sans erreurs, mais essayons à nouveau le bouton de blague. On dirait que nous avons cassé quelque chose, et Code Sandbox est assez agréable pour nous dire exactement ce que l'erreur est, ne peut pas définir la propriété blague de undefined. Il s'avère que nous avons causé cette erreur lorsque nous changeons la fonction OntellJoke à une méthode de classe. C' est parce que les méthodes de classe ne sont pas liées par défaut. Puisque OnTellJoke est appelé à partir d'un gestionnaire de clic, la référence à ceci n'est plus portée au composant, mais au bouton, donc nous obtenons une erreur en essayant de définir une valeur sur cette blague de pensée. Bien qu'il existe plusieurs solutions à ce problème, je choisis de lier explicitement chaque méthode du composant dans le constructeur. Notre composant n'a pas de constructeur pour le moment, alors commençons par en ajouter un. Puisque tous les composants s'étendent à partir de la classe de composant Reacts, vous devez vous assurer que vous appelez la super méthode avant de faire autre chose. Je vais prendre cette méthode OnTellJoke, et la réaffecter à une version de cette méthode qui est liée au composant. Maintenant, même si OnTellJoke est appelé à partir d'un gestionnaire de clic, cela référencera le composant et non le bouton. Avec cela fixé en place, allons-y et essayons à nouveau un bouton de blague. Génial, plus d'erreurs. Maintenant que notre composant a été mis à jour avec succès vers un composant de classe, nous sommes prêts à commencer à utiliser l'état local. Commençons par supprimer notre ancienne variable blague car elle n'est plus nécessaire. Au lieu de cela, nous allons créer une nouvelle variable blague dans notre état de composant. Lorsque vous ajoutez des valeurs d'état à votre composant, je commencerai généralement par ajouter des valeurs par défaut. Ceci est fait dans le constructeur en ajoutant directement des valeurs à la propriété d'état du composant. Je vais aller de l'avant et ajouter une blague à notre état et le mettre à null pour commencer. Il est important de se rappeler que c'est la seule fois que vous devez modifier directement l'état du composant. Pour les mises à jour d'état, vous devez toujours utiliser la méthode d'état de jeu de composants, que nous allons maintenant utiliser pour mettre à jour notre état chaque fois qu'une nouvelle blague est récupérée. Commençons par supprimer notre référence à notre ancienne variable blague. Remplaçons cela par un appel à cet état .set. Ensuite, nous allons passer l'état défini un objet avec nos valeurs d'état mises à jour. Dans notre cas, ce sera passer dans notre nouvelle valeur de blague récupérée. Lorsque vous utilisez set state, il est préférable de le considérer comme une requête, plutôt qu'une commande immédiate pour mettre à jour le composant. Ceci est dû au fait que set state ne met pas toujours immédiatement à jour le composant, il peut par lots ou différer la mise à jour jusqu'à plus tard. Cela rend la lecture this.state juste après l'appel des jeux de données piège potentiel. Pour éviter ces pièges avec l'état défini, je recommande de lire les documents officiels Reacts sur le sujet, car il s'agit d'une pièce critique lorsque vous traitez des sujets React plus avancés. Maintenant que nous avons branché nos appels d'état définis, mettons à jour notre élément de paragraphe pour utiliser l'état blague au lieu de notre ancienne valeur de blague. Voyons si ça a fait une différence. Joli. Maintenant, je vais cliquer sur le bouton blague, notre nouvelle blague est rendue à l'écran. Vous remarquerez également que les rendus sont maintenant enregistrés chaque fois que je clique sur le bouton. Ceci est attendu car chaque clic de bouton déclenche une mise à jour d'état et chaque mise à jour d'état déclenche un re-rendu. Cela termine l'introduction à l'état du composant. Ensuite, nous allons jeter un oeil à une autre caractéristique importante de React, les méthodes du cycle de vie. 7. Créer une application : des méthodes de cycle de vie: Dans cette leçon, je vais introduire des méthodes de cycle de vie réagit. Mais avant que je le fasse, faisons un résumé rapide. Dans la leçon précédente, nous avons branché notre bouton pour afficher une nouvelle blague chaque fois qu'il a été cliqué. Mais lorsque notre application se charge pour la première fois, notre écran semble plutôt nu. Donc, je vais aller de l'avant et ajouter une nouvelle fonctionnalité qui va chercher et afficher une blague juste lorsque l'application se charge. Alors comment on fait ça ? Pour cela, nous tirons parti des méthodes de cycle de vie des composants réacts. Ces méthodes fournissent des hooks qui vous permettent d'exécuter votre propre logique lorsqu'un événement correspondant se produit dans un composant. Dans notre cas, nous voulons récupérer une blague avant que le composant de l'application ne soit rendu à l'écran. Ceci est un cas d'utilisation parfait pour la méthode de cycle de vie de Reacts ComponentDidMount (). Si nous regardons les docs de réaction officiels, il est dit, « componentDidMount () est invoqué immédiatement après le montage d'un composant. » Il est également dit : « Si vous avez besoin de charger des données à partir d'un point de terminaison distant, c'est un bon endroit pour instancier la demande réseau. » C' est exactement ce qu'on faisait avec notre FetchJoke. Donc je pense que c'est un ajustement parfait pour notre scénario. Alors, continuons et ajoutons une méthode componentDidMount () à notre composant d'application. Maintenant, nous pourrions simplement copier le contenu de notre gestionnaire de clic sur tell blague dans le composant a monté comme ça et cela fonctionnerait bien, mais cela crée beaucoup de duplication ce qui n'est pas génial. Au lieu de cela, je vais copier cette logique dans une nouvelle méthode et l'appeler FetchJoke. Maintenant, je vais mettre à jour les deux composants ont monté et dit Joke à la fois appeler FetchJoke à la place. Avec ce changement, une blague est récupérée lorsque le composant de l'application monte, ce qui signifie que si je rafraîchis la page, je devrais voir une blague rendue sur la page tout de suite et nous y allons. Lorsque vous effectuez des requêtes réseau asynchrones, comme notre appel FetchJoke, il est bon de penser à ce qu'un utilisateur voit pendant le chargement de cette requête. Ma connexion est assez rapide, donc le temps entre moi cliquer sur le bouton de blague et de voir une blague est assez rapide. Mais qu'en est-il de ces utilisateurs sur une connexion plus lente ? Qu'est-ce qu'ils verront ? Je vais aller de l'avant et simuler une connexion plus lente en utilisant Chrome DevTools. Avec une connexion lente, vous pouvez voir que l'utilisateur doit attendre un certain temps avant de voir une blague apparaître à l'écran et pendant ce temps, l'utilisateur n'a aucune indication de ce qui se passe. Cela ne fait pas une excellente expérience utilisateur, alors continuons et améliorons cela. La première chose que je vais faire est de créer une nouvelle variable d'état nommée isFetchingJoke. Cela sera utilisé pour suivre quand une blague est récupérée et par défaut, je vais aller de l'avant et définir les valeurs par défaut. Le travail commencera à récupérer dès que FetchJoke est appelé. Donc, je vais ajouter un état défini appelé juste au début de cette méthode et set récupère blague à true. Une blague est considérée comme effectuée lorsque nous recevons une réponse de l'API blague, ce qui se produit ici. Puisque nous appelons déjà l'état set ici, je vais juste aller de l'avant et comme isFetchingJoke et le mettre à false. Pour tester que cela fonctionne comme prévu, je vais rendre la valeur de isFetchingJoke à l'écran. Puisque isFetchingJoke est une valeur booléenne, je vais appeler deux chaînes dessus, ce qui nous permettra de rendre la valeur à l'écran. Maintenant, lorsque je clique sur le bouton, vous pouvez voir que la valeur isFetching est définie sur true et une fois la blague retournée, isFetching revient à false. La première amélioration que je veux faire est d'avoir un bouton de blague désactivé pendant que la blague est récupérée. Cela empêchera l'utilisateur de cliquer à nouveau sur le bouton si nous récupérons déjà une blague. Pour que cela fonctionne, nous allons utiliser l' attribut buttons disabled et définir la valeur égale à notre nouvelle valeur d'état isFetchingJoke. Maintenant, chaque fois qu'une blague est récupérée, le bouton sera automatiquement désactivé, puis réactivé lorsque la récupération est terminée. Une autre amélioration que nous pouvons faire est d'ajouter meilleure messagerie pour l'utilisateur pendant qu'une blague est récupérée. Actuellement, nous montrons toujours juste la vieille blague. Au lieu de cela, je voudrais montrer un message de blague de chargement pour l'utilisateur. Pour ce faire, nous allons utiliser une expression conditionnelle. La condition sera si elle récupère blague est vraie, puis rendez le message de chargement et si c'est faux, rendez la blague comme nous le faisons maintenant. Allons de l'avant et supprimons notre étiquette IsFetchingJoke car nous n'en avons plus besoin. Allons-y et testons ça. Maintenant, nous pouvons voir que chaque fois qu'une blague est récupérée, nous obtenons ce bon message de chargement qui nous fait savoir que quelque chose se passe, c'est une grande amélioration pour les utilisateurs qui peuvent utiliser une connexion plus lente. Ensuite, nous allons examiner l'amélioration de ce que nous avons fait ici en ajoutant un formulaire pour une recherche. 8. Construire une application : Ajouter un formulaire de recherche: Maintenant que nous avons l'application qui fonctionne bien pour une blague, allons-y un peu plus loin. Au lieu de simplement chercher une blague aléatoire, donnons à l'utilisateur la possibilité de rechercher des blagues. La première chose dont nous aurons besoin, c'est un formulaire. Allons de l'avant et créons un formulaire vide pour commencer. Ensuite, nous avons besoin d'un endroit pour notre utilisateur pour entrer sa recherche. Allons de l'avant et ajoutons une entrée de texte avec du texte d'espace réservé. Enfin, je vais créer un bouton intitulé recherche, où l'utilisateur soumet notre formulaire. Maintenant qu'on a une configuration de formulaire ou qu'on me dise qu'un bouton de blague a l'air seul, flottant là-bas. Pour l'instant, je vais simplement le déplacer dans notre formulaire comme nous l'utiliserons plus tard. Quelle est la prochaine ? Lorsque vous travaillez sur une nouvelle fonctionnalité, je trouve très utile de la décomposer en tâches plus petites. Allons de l'avant et créons une liste de tâches pour suivre le travail que nous allons faire pour le formulaire de recherche. Tout d'abord appeler le point de terminaison de la blague de recherche et stocker les résultats, puis enregistrer la requête de recherche de l'utilisateur, puis déclencher la recherche sur le formulaire soumission. Après cela, rendre les résultats de la recherche à l'écran, puis accrocher le bouton Je me sens drôle, suivi par la création du composant de forum de recherche. Puis refactoring et nettoyage de code, et enfin, ajouter des styles à l'application. Maintenant que nous avons un plan, commençons avec la tâche numéro 1, appelant le point de terminaison de la recherche et stockant les résultats de la recherche. La première chose dont nous avons besoin, c'est où chercher les blagues de papa. Heureusement pour nous, la même API que nous utilisions pour récupérer une blague de papa aléatoire fournit également un point de terminaison de recherche. Selon les documents de l'API, nous devons passer le terme de recherche en tant que prem de requête et nous recevrons les résultats de recherche dans le format suivant. Je vais aller de l'avant et copier l'URL du point de fin de recherche. Au lieu de créer une nouvelle méthode pour la recherche, je vais réutiliser la méthode fetch blague existante. Je vais commencer par changer l'URL de récupération du point de terminaison de recherche de l'utilisateur que j'ai copié à partir des documents. Ensuite, supprimons l'appel setState pour l'instant et remplacez-le par un appel, je vais enregistrer les résultats de recherche sur la console. Ensuite, je veux renommer la méthode FetchJoke en quelque chose de plus approprié. Puisque FetchJoke est actuellement référencé à plusieurs endroits, je vais faire usage de sandbox de code changer toutes les occurrences option. Cela me permet de remplacer rapidement toutes les références de FetchJoke par les blagues de recherche de nouveaux noms à la place. Enfin, je vais faire un peu de nettoyage et supprimer certains éléments inutilisés qui ne sont plus utilisés. Jetons un coup d'oeil à la console et voyons ce qui se passe. Vous pouvez effectivement voir que nous avons déjà une réponse enregistrée sur la console. C' est parce que les blagues recherchées sont appelées sur la méthode de cycle de vie ComponentDidMount, tout comme FetchJoke l'était. Vous pensez peut-être, comment obtenons-nous les résultats de recherche si nous n'avons pas encore entré en tant que recherche ? Si nous apparaissons à nouveau sur les docks de l'API, vous pouvez voir que si aucun terme de recherche n'est valide, il retournera par défaut toutes les blagues. C' est ce qui se passe dans notre cas. Une autre chose que vous remarquerez peut-être est qu' une réponse de recherche contient plus que des résultats de recherche. Dans notre cas, nous ne sommes vraiment intéressés que par le tableau des blagues contenues dans la propriété results. Pour cette raison, je vais simplifier les choses et stocker les résultats directement dans une variable appelée blagues. Maintenant, nous pouvons voir que nous recevons juste un éventail de blagues, ce qui sera plus facile à travailler avec. Maintenant que nous savons que nos appels de recherche fonctionnent, nous avons besoin d'un endroit pour stocker les résultats. Pour cela, créons une nouvelle variable d'état nommée blagues et définissez-la égale à un tableau vide pour commencer. Ensuite, remplacons notre appel console.log par un appel à setState et passons les blagues renvoyées par la recherche. Pendant que nous y sommes, allons-y et ajoutons notre état IsFetchingJoke et mettons-le à false. Aussi, comme avant, nous devrions définir isFetchingJoke sur true lorsque SearchJokes est appelé pour la première fois. Enfin, supprimons l'ancienne variable d'état de blague car elle n'est plus utilisée. Juste pour vérifier que nos résultats de recherche sont stockés, je vais aller de l'avant et les rendre à l'écran. Puisque les blagues sont un tableau, nous allons généralement itérer sur les données pour les rendre. Pour l'instant, je vais juste appeler toString dessus pour que nous puissions voir quelque chose apparaître à l'écran. Voilà, nos résultats de recherche montrent, mais ils ont l'air plutôt moche en ce moment. Ne vous inquiétez pas cependant, donnera ces résultats de recherche dans un TLC très nécessaire assez tôt. Pour l'instant cependant, je pense que cela prend soin de la tâche numéro 1. Je vais aller de l'avant et écarter ça. Tu vois, n'est-ce pas satisfaisant ? On fait des progrès ici. La prochaine étape consiste à enregistrer la recherche de l'utilisateur dans l'état. 9. Créer une application : Enregistrer une quête de recherche: Commençons par la tâche numéro 2 de notre liste, en enregistrant la recherche de l'utilisateur dans l'état de l'application. Avant de plonger, je veux parler un peu plus des formes et réagir. Les formulaires sont un cas unique car les éléments de formulaire HTML natifs ont déjà géré leur propre état interne. Par exemple, si je tape dans notre entrée de recherche, la valeur est stockée dans l'état interne des entrées. Cela soulève la question, où devrait être géré l'état de forme dans une application React, dans l'état de réaction ou dans l'état interne des entrées. Dans notre cas, nous allons gérer notre valeur d'entrée de recherche en utilisant l'état de réaction. La première chose dont nous aurons besoin est un endroit pour stocker la valeur des entrées de recherche. Pour cela, je vais créer une nouvelle variable d'état appelée terme de recherche, et la définir égale à une chaîne vide par défaut. Ensuite, nous avons besoin d'un moyen d'avoir un terme de recherche synchronisé avec ce que les utilisateurs tapent réellement dans l'entrée de recherche. Pour cela, nous pouvons utiliser les entrées sur l'événement Change, qui, comme le nom dit, se déclenche chaque fois que la valeur de l'entrée change. Pour un test rapide, je vais juste ajouter une fonction de gestionnaire d'événements qui consigne la valeur des entrées. Le gestionnaire d'événements est transmis dans un objet d'événement, ce qui est très similaire à un événement JavaScript natif. Mais c'est en fait ce que React appelle des événements synthétiques. Cet événement synthétique est un wrapper autour de l'événement natif du navigateur. Cela suit la même interface, mais fonctionne de manière identique sur tous les navigateurs. Cela étant dit, nous pouvons accéder à la valeur de l'entrée sur event.target.value. Maintenant, si vous ouvrez la console et commencez à taper, nous pouvons voir que la valeur des entrées est déconnectée au fur et à mesure que nous tapons. Ensuite, supprimons la fonction de test, et créons une méthode de gestionnaire de modifications appropriée nommée sur la modification de recherche. Dans cette méthode, nous prendrons event.target.value et définirons notre état de termes de recherche égal à lui. Ensuite, mettez à jour les entrées de recherche sur l'événement Change pour appeler notre nouveau gestionnaire de modifications de recherche. Allons de l'avant et essayons de taper quelque chose dans notre recherche. Il semble que notre modification crée une erreur qui se produit lorsque vous tapez dans l'entrée de recherche. Si vous vous souvenez, nous avons déjà vu cette même erreur auparavant, et cela se produit parce que nous avons oublié de lier le gestionnaire de recherche on au composant. C' est la même chose que nous devions faire pour le gestionnaire OntellJoke avant. Allons-y et réparons ça. Parfait. Maintenant, taper dans l'entrée de recherche fonctionne sans erreur. Juste pour vous assurer qu'un terme de recherche est enregistré, nous allons temporairement le rendre à l'écran. Maintenant, nous pouvons voir que lorsque nous tapons, la valeur du terme de recherche est également mise à jour, avec le terme de recherche enregistré avec succès dans l'état de l'application, nous pouvons considérer cette tâche terminée. La prochaine étape se déclenche dans une recherche pour se produire sur le formulaire soumettre. 10. Créer une application : soumettre un serach: La prochaine fois sur notre liste de tâches est la tâche numéro 3, avec une surtension déclenchée lorsque le formulaire de recherche est soumis. Jusqu' à présent, le formulaire de recherche ne fait pas beaucoup. Si nous cliquons sur Rechercher, il semble que rien ne se passe. Allons de l'avant et changeons ça. La première chose que nous devons faire est de capturer quand le formulaire est soumis. Pour ce faire, nous allons utiliser l'événement Forms OnSubmit, auquel nous devrons passer notre fonction de gestionnaire d'événements. Je vais créer une nouvelle méthode nommée onSearchSubmit qui prend l'événement de formulaire comme paramètre et pour l'instant il suffit de se déconnecter mais le formulaire est soumis. N' oubliez pas non plus de lier ce nouveau gestionnaire au composant ou nous recevrons la même erreur que la dernière fois que nous avons oublié de lier notre méthode de gestionnaire. Ensuite, ajoutons notre nouveau gestionnaire à l'événement onSubmit pour ce formulaire de recherche, voyons ce qui se passe maintenant si nous cliquons sur la recherche pour soumettre le formulaire. C' est étrange, on ne voit rien apparaître sur notre console. Il s'avère que le formulaire fait exactement ce qu'il est censé faire. Il soumet le formulaire en tant que requête GET à la page, ce qui provoque ensuite l'actualisation de la page et l'effacement de la constante. C' est pourquoi nous ne voyons pas notre message de soumission de formulaire être déconnecté. Dans notre cas cependant, nous voulons gérer la soumission du formulaire et réagir. La première chose que nous devrons faire est d'empêcher la soumission du formulaire. Empêcher la soumission de formulaire utilisera le passage d' objet d'événement gestionnaire et appellera la méthode preventDefult dessus. Une fois en place, cela empêchera le comportement par défaut des formulaires sur soumission de se produire. Maintenant, lorsque nous soumettons le formulaire, nous pouvons voir que les formulaires soumis sont enregistrés sur la console comme prévu, et que la page n'est plus actualisée. Les choses ont l'air bien, mais notre forme ne cherche toujours rien. Allons de l'avant et remplacons le console.log et appelons plutôt notre méthode de recherche Jokes. Avant d'aller de l'avant et de tester cela, je vais supprimer notre appel de blagues de recherche de ComponentDidMount car il n'est plus nécessaire. Maintenant, allons de l'avant et soumettons le formulaire et voyons ce qui se passe. Il semble que le formulaire fonctionne, mais nous sommes toujours juste de rendre la version stringifiée du tableau blagues, ce qui malheureusement ne fournit pas beaucoup de détails sur les résultats de recherche. Pour l'instant, je vais enregistrer les blagues renvoyées de la recherche à la console. De cette façon, nous pouvons avoir une meilleure idée de ce qui se passe réellement. Je vais aller de l'avant et soumettre deux recherches de blagues différentes. Un pour les chats et un autre pour les chiens. Regardons de plus près la première blague de notre recherche de chat. « J'en ai marre de suivre mes rêves. Je vais juste leur demander où ils vont et les rencontrer plus tard ». Maintenant que c'était un choix pour ajouter une blague, ça n'a pas trop à voir avec les chats. Jetons un coup d'oeil à la première blague de notre recherche de chien. Non seulement cette blague n'a rien à voir avec les chiens, c'est la même blague exacte que nous avons eu la recherche de chat aussi bien. Ce comportement est en fait attendu car nous n'envoyons toujours pas la chaîne de recherche à l'API. Par conséquent, tous les appels de recherche renverront les mêmes listes de blagues par défaut, ce qui se passe avec nos recherches de chats et de chiens en ce moment. Rafraîchissons notre mémoire et revoyons les chiens. Si vous vous en souvenez, le point de terminaison de recherche nécessite que vous transmettiez le terme de recherche en tant que paramètre de chaîne de requête, ce qu'ils illustrent ici. Dans notre cas, nous remplaçions la valeur hipster par une valeur d'état de terme de recherche. Maintenant, lors de cette actualisation, mettons à jour l' appel de blagues de recherche pour utiliser ce paramètre de chaîne de requête. D' abord, je vais mettre à jour l'URL pour utiliser la syntaxe littérale du modèle JavaScript. De cette façon, je peux facilement intégrer notre valeur de terme de recherche en tant qu'expression. Maintenant que nous avons cela en place, essayons à nouveau de faire quelques recherches, comme avant, je vais commencer par chercher des blagues de chat et ensuite essayer une deuxième recherche de blagues de chien. Nous pouvons déjà voir que chaque recherche a renvoyé un nombre différent de résultats, ce qui est déjà un bon signe que quelque chose a changé. Maintenant, regardons de plus près la première blague de la recherche de chat  : « Sortez le chat, je ne savais pas qu'il était en feu. » C' est plus sur le sujet que la dernière fois. Maintenant, regardons la première blague de chien. « Pourquoi le cow-boy a-t-il eu un chien de saucisse ? Quelqu' un lui a dit de prendre un long petit chien ». N' hésitez pas à prendre un moment pour vous composer après ce bijou. Continuons. Les choses commencent vraiment à se réunir. Nous avons maintenant un formulaire fonctionnel qui soumet avec succès la recherche lors de la soumission, qui prend en charge la tâche numéro 3 de notre liste. Ensuite, je vais donner aux résultats de la recherche de rendu une attention beaucoup nécessaire. 11. Créer une application : les résultats de recherche de Render: Suivant sur une liste de tâches est le test numéro 4. Rendu dans le résultat de la recherche. En l'état actuel, les résultats de recherche ne sont pas trop à regarder. Nous ne pouvons même pas voir les blagues réelles de la recherche, ce qui n'est pas très utile. Pour afficher correctement une liste de résultats dans JSX, vous devrez parcourir la collection. La première chose que je vais faire est de changer la balise p en une balise de liste non ordonnée. C' est plus logique puisque nous faisons une liste de blagues. Puisque les blagues sont un tableau, je peux appeler la carte dessus. Pour chaque élément du tableau, je vais retourner un élément LI. À l'intérieur de chaque élément LI, je vais insérer la copie de blague réelle. Si vous vous souvenez, un objet blague contient un identifiant unique sous le prop ID, puis la blague elle-même sous le job prop. Dans notre cas, nous voulons juste rendre la blague. Essayons une recherche et voyons ce qui se passe. Joli. On dirait que nos blagues sont enfin rendues. Mais je peux voir que notre journal de console contient un avertissement. React vous donnera généralement un avertissement dans la console si vous faites quelque chose qui n'aime pas. Dans ce cas, il nous dit que chaque enfant dans un tableau ou un itérateur devrait avoir un accessoire clé unique et fournit même un lien pour plus d'informations si nous le voulons. Il semble que React nous dise que nous devons donner à chaque élément LI un accessoire clé unique. Cet attribut clé permet à React d'identifier les éléments individuels de la collection. Cela devient particulièrement important lors du tri de grandes collections car il permet réagir uniquement pour rendre les éléments qui changent au lieu de restituer la liste entière. La partie importante est que chaque valeur clé soit unique. Dans notre cas, nous pouvons utiliser l'ID prop de nos données blagues. Maintenant que chaque blague de la liste a une clé unique, notre avertissement de réaction a disparu. Vous avez peut-être remarqué que nous sommes toujours en train de définir qui récupère l'état de blague d'avant, mais nous ne l'utilisons plus. Tout comme avant, je voudrais montrer un message pendant que les résultats de recherche sont récupérés, nous pouvons utiliser la même approche que la dernière fois et utiliser une expression conditionnelle. Si c'est récupérer blague est vraie, affichez le message de recherche de blagues. Si la valeur de récupération de la blague est fausse, affichez les résultats de la recherche. Ci-dessous cela fonctionnera. Je ne suis pas un grand fan de ce formatage car je trouve plus difficile à lire. Parfois, vous pouvez trouver utile de diviser le rendu en fonctions plus petites. Je vais aller de l'avant et faire juste ça avec un élément de liste de blagues. Je vais commencer par créer une nouvelle méthode nommée blagues de rendu et que cela renvoie la liste non ordonnée des blagues à la place. Maintenant, je peux mettre à jour mon expression conditionnelle pour utiliser blagues rendues à la place de cet élément de liste de blagues, ce qui, je pense, rend la condition beaucoup plus facile à lire. Pour tester le message de chargement, je vais le lancer à nouveau sur ma vitesse de connexion en utilisant DevTools de Chrome. Maintenant, lorsque nous soumettons la recherche, nous obtenons un message de recherche beaucoup plus convivial pendant que les blagues sont récupérées. Cela prend soin de rendre les résultats de recherche sur notre liste de tâches. La prochaine étape est accrochage à, Je me sens drôle bouton. 12. Créer une application : je m'en d'de l'amie: Nous faisons de grands progrès dans nos listes de tâches et nous sommes prêts à passer à l'accrochage du bouton « Je me sens drôle ». Ce bouton est un jeu sur Google, « I'm Feeling Lucky » bouton, qui lorsqu'il est cliqué, amène l'utilisateur au premier résultat de recherche par défaut. Dans notre cas, sera de retour une blague « Papa célibataire ». Pour le bouton « Je me sens drôle », nous allons réutiliser le bouton « Dites-moi une blague » existant. Commençons simplement par relancer le bouton avec « I'm Feeling Funny ». En ce moment, si nous cliquons sur le bouton et qu'il appelle la méthode « On Tell Joke », qui appelle alors la « méthode des blagues de recherche ». Puisque nous n'avons pas de terme de recherche entré en ce moment, il renvoie simplement la liste de blagues par défaut. Alors, comment avons-nous obtenu le bouton « I 'm Feeling Lucky » pour ne retourner qu'une seule blague. Si nous revenons aux documents de l'API pour les blagues papa, vous verrez que le point de terminaison de recherche a d'autres paramètres de chaîne de requête disponibles. En regardant ici, nous pouvons voir qu'il y a un paramètre limite qui permet de contrôler la quantité de résultats retournés. Actuellement, nous utilisons la valeur par défaut qui retournera 20 blagues. Allons de l'avant et ajoutons une limite à notre appel de recherche et définissez-le égal à un. Quand je clique sur le bouton « Je me sens drôle », on ne récupère que la seule blague. Puisque nous avons codé en dur la limite d'un, notre formulaire de recherche ne renvoie qu'une blague aussi, qui n'est pas ce que nous voulons. Nous avons besoin d'un moyen de passer les blagues de recherche la limite que nous voulons utiliser. Pour ce faire, je vais ajouter un paramètre de limite et lui donner une valeur par défaut de 20. Cette façon de paramètres Novoalign passés, nous avons encore une valeur valide que nous pouvons utiliser. Maintenant, mettons à jour l'URL de recherche pour utiliser le nouveau paramètre de limite comme valeur. Laissez-nous tenter une nouvelle fois notre recherche. Il semble que la recherche fonctionne à nouveau, mais nous sommes de retour à la case 1 avec notre bouton « Je me sens chanceux » car il renvoie toujours plusieurs blagues. Pour résoudre ce problème, nous aurons besoin de mettre à jour les boutons sur le gestionnaire. D' abord, je vais supprimer la méthode « On Tell Blague ». Puisque tout ce que cette méthode fait est d'appeler la méthode « Search Jokes ». Nous pouvons l'enlever et simplement appeler « Rechercher des blagues » directement à la place. Maintenant que j'ai supprimé « On Tell Joke », j'ai également besoin de supprimer la méthode de liaison dans le constructeur. Maintenant, nous pouvons aller de l'avant et ajouter le « Search Jokes Call » au gestionnaire sur clic. Dans ce cas cependant, je veux passer une valeur de un pour le paramètre limit. Si je veux passer le paramètre blagues de recherche, je ne peux pas demander à l'événement On-click de l'appeler directement. Au lieu de cela, j'utiliserai une fonction [inaudible], qui me permettra d'appeler des blagues de recherche avec des paramètres et dans ce cas une limite d'un. Maintenant, quand je clique sur le bouton « Je me sens chanceux », je récupère une blague de sceau comme prévu. Si je soumets une recherche, je vois toujours plusieurs blagues revenir comme prévu. Je pense que nous sommes bons de supprimer le bouton « Je me sens drôle » de notre liste de tâches. Étape suivante : Création des composants du formulaire de recherche. 13. Créer une application : Component SearchForm: L' étape suivante d'une liste de tâches consiste à créer un composant SearchForm. Jusqu' à présent, nous avons fait tout notre travail dans un seul composant ou composant d'application. Dans React, vous ne voulez pas qu'un seul composant gère trop. Tout comme les fonctions, si vous trouvez qu'un composant fait trop, c'est généralement un bon signe qu'il peut être divisé en composants plus petits. regardant notre composant d'application, je pense que le SearchForm est un bon candidat à être divisé en son propre composant. Commençons par créer un nouveau fichier nommé SearchForm.js. Pour l'instant, SearchForm sera un composant fonctionnel à os nus qui renvoie un chacun contenant un message d'accueil. Ce sera un espace réservé temporaire jusqu'à ce que nous déplacions l'élément de formulaire à partir du composant de l'application. C' est aussi un modèle courant que l'exportation par défaut d'un fichier de composant soit le composant lui-même, qui est le modèle que nous suivrons. Pour utiliser le composant SearchForm à partir de l'application, vous devez l'importer comme vous le feriez pour n'importe quel autre fichier. Ensuite, ajoutons le composant à la méthode de rendu et voyons si cela fonctionne. Joli. Nous pouvons voir notre rendu de composant, mais cela ne fait pas grand-chose. Copions le SearchForm de l'application dans le fichier de composant SearchForm. Une fois que nous avons enregistré cela, nous pouvons nous attendre à voir quelques erreurs, car nous faisons toujours référence aux méthodes endstate à partir du composant de l'application. La première erreur que nous obtenons est « Impossible de lire la propriété onSearchSubmit of undefined ». Cela est dû au fait que la méthode onSearchSubmit fait référence à notre composant d'application. Alors, comment accéder aux méthodes dans le composant d'application à partir du composant SearchForm ? C' est là que les accessoires sont ton ami. Revenons au composant d'application, et ajoutons un nouvel accessoire à ce SearchForm nommé onFormSubmit. Ce que nous allons faire est de transmettre la référence des applications à onSearchSubmit comme valeur de l'accessoire onFormSubmit. Maintenant, de retour dans SearchForm, au lieu d'appeler onSearchSubmit, nous allons accéder aux accessoires de composants, et utiliser le nouveau prop OnFormSubmit à la place, qui n'oublie pas est une référence à la méthode onSearchSubmit dans l'application. Maintenant, quand nous sauvegardons, nous pouvons voir que l'erreur onSearchSubmit a disparu, mais maintenant nous avons une nouvelle erreur, mais cette fois il se plaint de onSearchChange étant indéfini. Donc, sur le formulaire, je vais commencer par ajouter un nouvel accessoire à SearchForm nommé onSearchValueChange , puis passer la référence des applications à onSearchChange en tant que valeur. Ensuite, dans notre SearchForm, nous appellerons l'accessoire OnSearchValueChange à la place de OnSearchChange. Maintenant, lorsque nous sauvegardons, l'erreur est remplacée par une nouvelle se plaignant que l'état n'est pas défini. À présent, vous devriez connaître la routine. Je vais ajouter un nouvel accessoire à SearchForm nommé IsSearching et passer l'état isFetchingJoke comme valeur. Pendant que j'y suis, je vais pluraliser le nom pour iFetchingBlagues puisque nous allons maintenant chercher plus d'une blague. De retour dans SearchForm, remplacez la référence à IsFetchingJoke par IsSearchprop. Aussi, je viens de remarquer que nous ne désactivons que le bouton I 'm Feeling Lucky quand isSearching est vrai. On devrait faire la même chose pour le bouton de recherche. Donc, ajoutons l'accessoire de désactivation là aussi. Eh bien, on dirait que nous avons corrigé les erreurs, mais je peux voir que nous faisons toujours référence à SearchJokes depuis le bouton Je me sens drôle. Si je vais de l'avant et que je clique dessus, vous pouvez voir que nous obtenons une erreur, 'Impossible de lire la propriété searchJokes d'indéfinie'. Cela semble être notre dernière référence restante au composant de l'application, alors allons-y et réparons-le. Je vais commencer par copier la valeur onClick existante car nous en aurons besoin. Ensuite, je vais ajouter un autre accessoire à SearchForm nommé onSingleSearchClick et pour la valeur, je vais coller dans la valeur onClick que j'ai copiée auparavant. Maintenant, dans SearchForm, nous allons utiliser l'accessoire OnSingleSearchClick à la place. Maintenant, sauvegardons et voyons à quoi ressemblent les choses. Il semble que le bouton I 'm Feeling Funny fonctionne à nouveau, et la recherche est aussi bonne. Maintenant que tout fonctionne à nouveau, regardons de plus près le nouveau composant que nous avons créé. La méthode de rendu semble beaucoup plus rangée maintenant avec toute la logique formelle cachée dans le composant SearchForm. Un autre bonus ajouté est que le composant SearchForm ne gère plus de données seul. Toutes les références aux données sont traitées par le biais d'accessoires et de rappels. Vous avez peut-être remarqué que j'ai gardé mes noms d'accessoires aussi génériques que possible. Ne pas avoir vos noms d'accessoires étroitement couplés à vos données, rend votre composant plus polyvalent. De cette façon, si nous finissons par changer notre application pour rechercher autre chose que des blagues, nous n'avons pas besoin de renommer aucun de nos accessoires SearchForm. Ce type de composant est parfois appelé un composant muet ou présentationnel dans la communauté React. Ces composants ne se soucient pas du type de données qui leur est transmis, ils ne se préoccupent que de leur apparence. Cela crée un bon point qu'il est beaucoup plus facile à réutiliser. Par exemple, si nous voulions que notre SearchForm recherche autre chose que des blagues, nous devons juste mettre à jour les accessoires et les rappels pour transmettre des données différentes au lieu de créer un tout autre composant. le composant SearchForm terminé, nous pouvons le retrancher de notre liste. Ensuite, nous ferons un peu de refactoring et de nettoyage. 14. Créer une application : Refactoring et nettoyer: Nous sommes presque à la fin de notre liste de tâches, et maintenant il est temps de refactoriser et de nettoyer. Vous pouvez penser au refactoring comme un entretien ménager pour votre code. Il est toujours bon de prendre du recul après avoir développé une nouvelle fonctionnalité pour voir s'il y a des domaines sur lesquels vous pouvez apporter des améliorations. Cela étant dit, j'aimerais apporter quelques améliorations concernant le nouveau composant du formulaire de recherche. Si nous regardons à la fois la modification sur la recherche et la méthode sur la recherche Submit, ils attendaient tous les deux un objet d'événement en tant que paramètre. Maintenant que nous passons ces méthodes comme accessoires au formulaire de recherche, nous ne pouvons pas toujours garantir qu'elles seront appelées avec un événement. Je vais commencer par la méthode on search Submit, et supprimer le paramètre d'événement ainsi que le point d'événement [inaudible] empêche par défaut. Maintenant, sur la recherche Submit ne fait rien d'autre que d'appeler des blagues de recherche, ce qui nous permet de simplifier un peu les choses. Maintenant, le formulaire de transmission, soumettre la méthode de soumission à la recherche. Je vais juste aller de l'avant et passer la méthode des blagues de recherche directement. Ce qui signifie en fait que nous pouvons nous débarrasser de la recherche Submit et de la logique de liaison dans le constructeur avec elle aussi. Aussi, n'oubliez pas de lier des blagues de recherche au composant. Maintenant qu'il est appelé comme un gestionnaire d'événements. En supprimant le gestionnaire d'envoi à la recherche, nous avons également supprimé la méthode preventDefault qui arrêtait notre formulaire de Soumission. Si nous soumettons une recherche maintenant, vous pouvez voir que la page est à nouveau rafraîchissante. Parce que les formulaires par défaut, les comportements d'envoi ne sont plus empêchés. Pour résoudre ce problème, nous allons maintenant gérer l'événement de soumission de formulaire à partir du composant de formulaire de recherche. La première chose que je dois faire est d'ajouter un retour explicite dans le composant. De cette façon, je peux créer une nouvelle fonction nommée onsubmit, que je vais ensuite utiliser pour le gestionnaire d'événements onsubmit maintenant. Cela signifie que la fonction onsubmit recevra l'objet événement comme premier paramètre et maintenant que nous avons accès à l'objet événement, nous pouvons empêcher la soumission de formulaire en utilisant la même méthode qu' avant et après cela, nous faisons simplement un appel à le formulaire sur Soumettre prop. Maintenant, lorsque nous soumettons une recherche, le formulaire fonctionne de nouveau comme prévu. Mais ayant le formulaire de recherche gérer ses propres événements de formulaire, nous l'avons découplé du composant de l'application. Ensuite, améliorons également la méthode de changement de recherche sur, et supprimez le paramètre d'objet d'événement. Au lieu de cela, il rendra les choses plus génériques et changera le paramètre sauf la valeur directement au lieu de l'extraire de l'objet événement. Maintenant, à partir du formulaire de recherche est au passage de l'événement, va tirer la valeur de l'événement et passer cela à la place. Cela aide encore à découpler le composant du formulaire de recherche du composant de l'application et plus le composant découplé est, plus il est facile à réutiliser. Juste pour démontrer que je vais dupliquer notre formulaire de recherche, mais dans ce formulaire, je ne vais revenir aux blagues que quand une recherche est soumise. Ce changement devient très facile en modifiant un seul prop et le second composant de formulaire. Maintenant, quand je recherche avec le premier formulaire, cela fonctionne de la même manière qu'avant. Lorsque je recherche avec le deuxième formulaire, je ne reçois que les deux résultats de recherche. deux formulaires utilisent le même composant, mais peuvent fonctionner indépendamment les uns des autres. Ce n'est peut-être pas l'exemple le plus pratique, mais j'espère qu'il démontre les avantages de l'utilisation de composants DOM. Avant qu'on finisse, je veux faire quelques articles d'entretien rapide. abord, se débarrasser de l'étiquette de terme de recherche que nous utilisions pour tester plus tôt car nous n'en avons plus besoin. La dernière chose que je vais supprimer le journal des points de la console, nous utilisions le test des résultats de la blague plus tôt. Maintenant, laisse-moi le ranger un peu. Nous sommes prêts à passer à notre dernière tâche : styliser l'application. 15. Construire une application : ajouter des styles: À ce stade, je suis assez heureux avec la façon dont l'application fonctionne, mais pas si heureux avec ce qu'il ressemble, ce qui mène bien dans notre prochain sujet ; style de votre application React. Quand il s'agit d'ajouter des styles dans React, il y a beaucoup de saveurs différentes à choisir. Il y a de vieux CSS, des pré-processeurs CSS comme Sass, modules CSS, CSS in-jazz et beaucoup d'autres que je pourrais aborder. Le fait est qu'il n'y a pas de bonne ou de mauvaise solution, car il s'agit vraiment de ce qui fonctionne pour vous. Ma recommandation est d'expérimenter vous-même et de voir lequel d'entre eux, cas échéant, vous aimez vraiment travailler. En attendant, je vais juste passer en revue quelques bases de l'utilisation de CSS vieux dans React. Vous avez peut-être déjà remarqué que notre application contient les styles dot css déjà. Cela a été créé par CodeSandBox lorsque nous avons commencé. Si nous ouvrons ce fichier, vous verrez que nous avons un seul nom de classe point App avec quelques règles CSS de base. Nous n'utilisons pas cette classe en ce moment, mais nous pouvons facilement l'ajouter à un élément en ajoutant le nom de la classe prop et en définissant la valeur égale au nom de la classe. C' est vraiment, ce n'est pas différent de la façon dont vous le feriez avec du HTML et du CSS simples. La grande différence ici est que vous utilisez le nom de classe prop, au lieu de l'attribut class. Maintenant, lorsque nous enregistrons, vous pouvez voir que notre application utilise ces nouveaux styles car notre formulaire est maintenant centré sur la page. Une autre chose que vous avez peut-être remarqué est la ligne css de points d'importation en haut de notre composant d'application. Comment notre fichier JS importait-il un fichier CSS ? Vous pouvez demander. Si vous n'êtes pas familier avec les bundlers comme webpack, cela peut sembler vraiment étrange. Dans notre cas, nous avons de la chance car webpack a déjà été mis en place pour nous par CodeSandBox et webpack pourrait honnêtement être un cours tout seul. Pour l'instant, sachez simplement qu'une fois qu'un fichier CSS est importé, ces styles seront ajoutés à votre application et sont prêts à l'emploi. En outre, vous n'êtes pas limité à garder tous vos CSS dans un seul fichier. En fait, il est courant que chaque composant ait son propre fichier CSS dédié. Cela étant dit, continuons et créons un fichier CSS pour notre composant de formulaire de recherche. Je vais aller de l'avant et nommer ce formulaire de recherche de fichier point CSS. Il est également courant qu'un composant et son fichier CSS aient le même nom. Non seulement cela aide à l'organisation dans le système de fichiers, mais il indique également très clairement que ces styles appartiennent à ce composant. Maintenant que nous avons notre fichier CSS prêt, je vais aller de l'avant et tirer dans certains styles pré-cuits que j'ai créés plus tôt. Ensuite, nous allons importer le formulaire de recherche CSS dans notre fichier de composant et enregistrer. Si nous regardons de plus près le formulaire de recherche CSS, vous pouvez voir qu'il y a une classe de formulaire de recherche à l'intérieur. Je vais aller de l'avant et ajouter cette classe à l'élément racine dans le composant de formulaire de recherche. En outre, je vais aller de l'avant et envelopper nos boutons dans un div car il est juste nécessaire pour faire fonctionner certains de ces styles. Maintenant, quand j'économise, vous pouvez voir que les choses commencent vraiment à paraître mieux maintenant que nous avons un peu de style. Il est important de faire attention lorsque vous divisez CSS en fichiers séparés, que vous ne surpassez pas les styles dans un autre fichier. Même si le fichier css du formulaire de recherche est uniquement importé dans le composant, ce composant est également importé dans une application. Une application a également son propre fichier CSS. Pour démontrer, je vais aller de l'avant et ajouter une couleur d'arrière-plan à l'élément body dans le formulaire de recherche point CSS. Ensuite, je vais ajouter une couleur de fond au corps et à l'application CSS ainsi et enregistrer. Comme vous pouvez le voir, les styles de corps et l'application dot css ont écrasé les styles de corps et la forme de recherche point CSS. Vous devez donc être prudent lorsque vous travaillez avec plusieurs fichiers. Si vous en avez une chance, je vous recommande de jeter un oeil modules CSS car vous n'avez pas à vous soucier de remplacer d'autres classes CSS car cela garde vos styles de composants locaux au composant dans lequel vous travaillez. Ok, pour finir, je vais tricher un peu et apporter le reste des styles finis pour le composant App ainsi. Last but not least, notre beau papa blagues édition logo Google. Là, vous l'avez, votre propre père entièrement fonctionnel blagues moteur de recherche intégré réagir. Avec le style complet, qui prend soin du dernier élément de notre liste des tâches. Prochaine étape, nous allons faire quelques explorations de haut niveau sur le fonctionnement de React dans les coulisses. 16. Comment ça fonctionne : Rendu dans le DOM: Lorsque vous travaillez dans React, il est facile d'oublier que votre application est toujours en cours d'exécution dans un ancien fichier HTML. Dans notre cas, c'est le fichier d'index HTML que CodeSandBox a créé pour nous. Si je l'ai ouvert et jette un coup d'oeil, vous pouvez voir qu'il n'y a pas beaucoup de balisage HTML dans le corps autre que ce div vide. Juste pour prouver que c'est en effet la page que nous rendons dans le navigateur, je vais aller de l'avant et ajouter un message personnalisé et enregistrer. Une fois que j'ai enregistré, vous pouvez voir que cette copie apparaît maintenant avec le message hello CodeSandBox, qui vient de notre composant d'application. Mais nous ne voyons pas la copie du composant d'application n'importe où dans ce fichier HTML, alors comment se fait-il que nous la voyions dans le navigateur ? La raison en est que React gère le rendu du composant d'application pour nous et il gère la création des éléments DOM qui s'affichent dans le navigateur. Mais comment les éléments créés par React ont-ils fini dans le fichier HTML d'index ? React nécessite que vous lui fournissiez un noeud DOM dans lequel le rendu est appelé noeud DOM racine. Dans notre cas, le nœud DOM racine est ce div vide que j'ai souligné plus tôt, qui a assez commodément un attribut ID égal à root. Si nous revenons à l'Add Component, vous verrez que nous faisons un appel au point ReactDom. Le paquet ReactDom est séparé de React et contient des méthodes surprenantes, spécifiques à traiter avec le DOM. Si vous finissez par travailler avec le rendu côté serveur, vous travaillerez également avec ReactDom. Maintenant, revenons à notre composant d'application lorsque ReactDom point rendu est appelé son passé le composant et une référence à l'élément DOM racine. Le rendu ReactDom n'est généralement appelé qu'une seule fois, et une fois qu'il est appelé tout à l'intérieur de l'élément DOM racine est maintenant géré par React. Juste pour démontrer, je vais ouvrir mon Chrome DevTools et inspecter le DOM. Ici, je peux voir l'élément div racine qui était vide dans notre fichier HTML. Mais maintenant, au lieu d'être vide, il contient les éléments gérés par React. Maintenant que nous savons comment React rend dans le DOM, regardons de plus près comment il gère les mises à jour de rendu. 17. Comment fonctionne : Rendu: Plus que probable si vous demandez à quelqu'un pourquoi utiliser React, ils pourraient dire parce que c'est rapide. Bien que React soit super efficace quand il s'agit de rendre les mises à jour, cela n'aide pas vraiment à répondre pourquoi est-il rapide ? Je voulais creuser quelques fonctionnalités clés qui contribuent à la vitesse de réaction. Numéro un, React ne met à jour que ce qui est nécessaire. Vous voyez dans React lorsqu'un composant est mis à jour, il s'assure qu'il applique uniquement ce qui a changé au DOM. Pour démontrer, j'ai un exemple simple qui se compose d'un composant nommé bouton. Chaque fois que le bouton est cliqué, il incrémente un état de nombre de clics un et rend ce compte dans le libellé des boutons. Je vais ouvrir cet exemple dans une fenêtre de navigateur autonome afin que je puisse mieux accéder à mes outils de développement Chrome. Dans l'onglet éléments, je vais sélectionner le bouton et développé afin que nous puissions voir tout le contenu de l'élément. Maintenant, lorsque je clique sur le bouton, vous pouvez voir que la valeur du nombre est en train de changer et il est également mis en évidence chaque fois qu'il change. Cette mise en évidence représente ce qui est en cours de modification dans le DOM. Nous pouvons voir que notre étiquette de nombre de boutons et de clics reste intacte. Seule la valeur de nombre est en cours de mise à jour. Maintenant, j'ai le même exemple en JavaScript sans réagir cette fois. Je vais sélectionner l'élément dans les outils de développement et développé comme avant. À ce moment, lorsque je clique sur le bouton, vous pouvez voir que tous les boutons sont mis en surbrillance cette fois. Cela signifie qu'au lieu de juste le numéro en cours de modification, le bouton entier est modifié dans le DOM. Bien que cet exemple soit simple, imaginez à quel point ces mises à jour efficaces deviennent importantes lorsque votre application augmente en taille et comporte des centaines d'éléments. Une autre chose que React fera est les mises à jour d'état par lots ensemble. Si vous déclenchez plusieurs changements d'état à partir d'un gestionnaire de ventilation réactif ou d'une méthode de cycle de vie, toutes ces modifications seront regroupées en un seul rendu. Par exemple, faisons semblant d'avoir une application React simple qui se compose d'un composant d'entrée de recherche, d' un composant de liste de résultats et d'un composant de pagination. Lorsque je clique sur le bouton de recherche, cela déclenche un changement d'état dans les trois composants. Maintenant, compte tenu des changements à 3 états, vous devriez généralement voir trois rendus. Mais ce n'est pas le cas en l'espèce. C' est en fait juste le rendu unique. Cela est dû au fait que les trois mises à jour d'état ont été groupées ensemble et React est capable faire parce que les trois mises à jour proviennent du même événement de clic. Maintenant sur le dernier élément de la liste, les éléments React ne sont que des objets simples. Contrairement aux éléments DOM du navigateur, les éléments React sont des objets et bon marché à créer. En fait, l'ensemble de votre application React est représenté par un objet qui est conservé en mémoire. Par exemple, prenons ce simple balisage HTML pour un formulaire de connexion avec un nom d'utilisateur et une entrée de mot de passe. Dans React, cela serait représenté par un objet qui ressemble à ceci. Vous pouvez voir que chacun des éléments HTML est représenté par un objet et réagit. Ensuite, lorsqu'un changement se produit, réagir comparera la version précédente de l'objet à la version mise à jour de l'objet et apportera des mises à jour en fonction différences, puis rendra les modifications au DOM. Eh bien, c'était une rupture très simplifiée du concept DOM virtuel complexe de React. J' espère que ça vous a donné un aperçu de ce qui se passe sous le capot dans React. Ce ne sont que quelques-unes des grandes caractéristiques qui contribuent à réagir rapidement et efficacement. Bien que ces éléments ne soient pas nécessaires à l'apprentissage pour React, je crois qu'avoir au moins une compréhension de haut niveau de ces fonctionnalités vous aidera à devenir un meilleur développeur React. 18. Conclusion : les résultats: Avant de terminer les choses sur la classe, je voulais vous donner un aperçu rapide du projet de classe. Le projet consiste à prendre une application de blague de recherche [inaudible] que nous venons de créer, et à y ajouter quelques améliorations. Ces améliorations sont décrites dans la description du projet, mais je vais aussi vous expliquer maintenant. Chacune de ces nouvelles fonctionnalités s'appuiera sur ce que vous avez déjà appris tout au long du cours. Le premier élément de la liste est de déplacer la liste des résultats de recherche dans son propre fichier de composants. Ensuite, vous devrez ajouter un message « aucun résultat trouvé » lorsqu'une recherche ne renvoie aucune blague. Après cela, ajoutez un bouton qui efface les résultats de recherche et le terme de recherche. Ajoutez ensuite une entrée de sélection qui permet à l'utilisateur de sélectionner le nombre de blagues renvoyées par la recherche. Enfin, si vous êtes prêt à relever un défi, mettez à jour l'entrée de recherche afin que les résultats soient mis à jour au fur et à mesure que vous Pour ajouter votre travail, vous devrez d'abord faire une copie de mon CodeSandBox en le forking. Pour bifurquer mon projet, ouvrez simplement l'URL du projet CodeSandBox incluse dans la description de la classe, et cliquez sur le quatrième bouton dans la navigation principale. Ignorez l'avertissement car je ne reçois que cela car je suis le propriétaire du projet à fourcher. Maintenant, j'ai une copie du projet que je peux renommer et apporter modifications que j'aime indépendamment de la version originale. Si vous avez des questions ou des commentaires, hésitez pas à me contacter sur Twitter ou à laisser un commentaire ici dans la classe. Si vous avez apprécié la classe, n' hésitez pas à faire passer le mot et à partager le lien. Regardez moi aussi sur les médias. Si vous avez une chance que je poste aussi régulièrement, ils sont à propos de React. Merci encore de me rejoindre et j'espère vous voir dans les prochains cours aussi.