Commencer avec React JS

1. Intro: Bonjour, là. Je m'appelle Daniel. Je suis développeur ici chez Skillshare et j'aimerais vous souhaiter la bienvenue pour commencer avec les codes React. L'objectif de ce cours est de vous donner les concepts et les idées nécessaires pour commencer à utiliser ReactJS dans vos applications Web. Le cours est divisé en deux sections. La partie fondamentale, dans laquelle nous discuterons des éléments constitutifs de React, des éléments tels que les composants React, les propriétés, l'état ou la façon d'utiliser CSS pour coiffer vos composants. Toutes les leçons de cette section, je vais montrer modulaire et au point pour que vous puissiez les utiliser ultérieurement comme références. Il y a également la partie des exemples. Ici, nous allons construire des exemples plus complexes que j'ai développés à travers plusieurs leçons. Nous verrons comment les concepts de base de React sont combinés afin de créer une application complète. Je vous encourage à suivre et à coder. Le cours comporte plus de 15 concepts et chaque leçon a son projet de départ ainsi qu'un exemple final de la façon dont ces fichiers devraient ressembler à la fin de la leçon. De plus, avant de commencer ce cours, assurez-vous d'avoir installé l'utilitaire Create React app. Les liens sont fournis dans la description de ce cours. Veuillez noter que s'il s'agit d'un cours dédié à vous présenter ReactJS, vous devez avoir une compréhension de base du JavaScript, HTML et du CSS en général. Commençons par voir comment React peut vous faciliter la vie et stimuler votre carrière. 2. Votre premier composant réagir: Le modèle de départ de notre premier exercice est presque vide. Nous avons ce fichier js index qui ne contient qu' un élément et un index.html avec un corps vide. Gardez à l'esprit que pour commencer notre exercice, j'ai téléchargé notre modèle de démarrage, je l'ai compressé, et après avoir exécuté npm install et npm [inaudible], nous devrions avoir cette alerte chaque fois que nous sauvegardons un fichier. L'objectif de cette leçon est de créer notre premier composant réact. Pour cela, je dois d'abord ajouter dans le index.js, l'instruction import pour react. Il existe plusieurs façons de créer des composants React. L'approche la plus classique consiste à utiliser des classes JavaScript. Pour cela, je vais d'abord créer une classe appelée premier composant. Ce premier composant va étendre React.Component. Le composant [inaudible] cacao for react est la fonction de rendu. React étendra la balise correspondant à composant à tout ce qui est renvoyé par la fonction de rendu. Dans notre cas, si nous voulons que notre premier composant soit juste un h1, ici, je dirai que je veux retourner h1 avec le texte, bonjour le monde. Maintenant, si nous sauvegardons et que la page est actualisée, nous n'obtiendrons que cette alerte en sortie. C'est parce que nous n'avons pas dit à réact où placer ce composant dans le code HTML. abord, déplacons cette alerte et après, je vais entrer dans le index.html ici, créer une div avec l'identifiant de root. Cette nouvelle div créée servira de conteneur pour notre composant. De retour dans l'index js je vais ajouter une nouvelle déclaration impulsionnelle. Cette fois pour un ReactDom. ReactDom possède également une fonction de rendu, mais celle-ci prend un composant React spécifique et l'attache à une note HTML. Nous pouvons dire ReactDom.Render et en tant que premier paramètre, nous allons donner notre premier composant et en tant que deuxième paramètre, nous utiliserions Document.GetElementByID et nous dirons que nous voulons attacher ce premier composant à l'ID de la racine. Maintenant, si j'économise, nous pouvons voir à l'écran notre premier composant réact. En conclusion, l'idée est que n'importe quel composant React possède cette fonction de rendu et react étendra par défaut la balise réact réelle à ce qui est renvoyé par cette fonction aléatoire. 3. Composants encrés: Le composant que nous avons à l'écran est très simple. Il a juste un nœud HTML h1 avec du contenu. Mais lorsque nous sommes dans cette fonction, nous pouvons également renvoyer des structures HTML plus complexes. Par exemple, ici, je peux ajouter un lien. Si nous économisons, nous pouvons voir que les choses fonctionnent comme avant. Que se passe-t-il si notre composant devait être tourné vers une direction encore plus complexe ? Disons qu'après ce h1, nous voulons également avoir une ligne horizontale. Si nous économisons, nous verrons que nous obtiendrons une erreur. Cela se produit car dans des conditions normales, la fonction de rendu doit simplement renvoyer un seul élément racine. Dans les nouvelles innovations, il existe des solutions de contournement pour ce monde. Mais la solution la plus simple dans notre cas, ce sera juste d'ajouter ici div de fermeture qui servira d'élément racine. Si nous économisons, nous pouvons voir que notre composant possède également un h1, un lien, mais aussi cette ligne horizontale que nous avons ajoutée précédemment. Mais les choses peuvent devenir encore plus intéressantes. Que se passe-t-il si nous avons besoin d'un autre composant composé de deux composants de ce type ? En fin de compte, une application React est un ensemble d' éléments React qui travaillent ensemble pour atteindre un objectif commun. Nous allons ajouter un nouveau composant, et ce composant s'appellera App. Pour le construire, je vais simplement copier-coller ce premier composant, changer son nom en App, et à partir de cette fin de fonction, nous retournerons simplement cette div vide. Maintenant, dans ReactDom, si nous le remplacons par un composant à définir sur App et à enregistrer, nous obtiendrons simplement l'écran vide. Cela se produit, bien sûr, car à partir de cette fin de fonction, nous retournerons simplement la div vide. Mais nous pouvons venir ici et à partir de l'instruction retour ajouter deux composants de type premier composant. Si nous économisons, nous pouvons voir à l'écran que notre application est devenue plus complexe. Il est possible de devenir aussi complexe que nous le voulons avec ce type de structures. Nous verrons dans les prochaines leçons comment utiliser des éléments tels que les propriétés, le contexte ou les événements pour envoyer des données d'un composant à un autre. 4. JSX et interpolation: Jetons un coup d'œil à ce que nous avons à l'écran. Nous avons une classe JavaScript et d' autres objets JavaScript importés et utilisés. Vous vous demandez peut-être, même si nous sommes dans un fichier JavaScript, comment utiliser des structures HTML comme celle-ci ? Eh bien, c'est parce que la syntaxe appelée JSX vient de JavaScript XML et a été développée par les gens de Facebook pour être utilisée avec React. qui est génial, c'est que nous pouvons utiliser ce type de mélange entre HTML et JavaScript même à un niveau plus profond. Cette méthode de rendu est finalement une fonction JavaScript. Par conséquent, en utilisant JSX, je peux interpoler une variable JavaScript dans le code HTML réel. Cela signifie que je peux déclarer ici une variable appelée x avec une valeur de 10, et à l'intérieur de l'instruction return, ajouter un nouveau paragraphe qui dit quelque chose comme, la valeur de x est, et en utilisant des accolades, Je vais juste entrer ici le nom de la variable, dans notre cas x, et si je sauvegarde, nous verrons à l'écran que nous avons ce nouveau paragraphe composé d'un texte HTML statique, mais aussi d'une valeur qui vient directement de JavaScript, ce 10, encore plus pour que nous puissions ajouter des expressions Ruby ou JavaScript ici. Quelque chose comme le double de x est, et ici à l'intérieur des accolades, je peux ajouter tout ce que je veux tant que c'est une expression JavaScript et dire quelque chose x multiplié par 2, et nous obtiendrons le double de x est 20, et c'est non limité aux chiffres. Par exemple, je peux utiliser des objets JavaScript ou d'autres objets. Disons que nous allons définir ici une nouvelle variable appelée my-string avec la valeur de React est cool, et après cela, allez dans l'instruction return et ajoutez ici un nouveau paragraphe indiquant que les cinq premiers caractères sont et en utilisant des accolades, Je vais prendre ma chaîne et dire sous-chaîne de zéro et cinq et cela fonctionnera comme on peut le voir à l'écran les cinq premiers caractères sont React. C'est ainsi que nous pouvons utiliser JSX et l'interpolation pour que nos composants React affichent des données complexes. 5. Propriétés de composants réagir: Afin d'expliquer quelles sont les propriétés de React, commençons par l'exemple actuel. Nous avons notre application React qui affiche deux paragraphes. un avec le contenu « Bonjour, je m'appelle Bob » et l'autre avec le contenu « Bonjour, je m'appelle Joe ». Étant donné que le contenu est très similaire, il sera tout à fait logique d'éliminer ces redondances et de créer un composant React qui affiche ce texte. chose comme, le composant disons bonjour, à partir de sa méthode de rendu, je vais juste retourner un paragraphe vide avec le contenu, « Bonjour, mon nom est ». En théorie, nous devrions pouvoir remplacer ces deux éléments par quelque chose comme, disons bonjour, pour le premier paragraphe et le deuxième composant pour le deuxième paragraphe. Mais il y a un problème ici, et c'est le fait que pour le premier paragraphe, le nom est Bob, et pour le second, il s'appelle Joe. Les propriétés React sont exactement ce que HTML [inaudible]. Par exemple, si je prends une note de lien ici, avec du texte. J'ai cet attribut href que je peux pointer ce lien vers quelque chose comme google.com. Je peux venir ici et dire, d'accord, le nom du premier composant est égal à Bob, et le nom du deuxième composant est égal à Joe. Nous avons cela en place à l'intérieur du composant réel, disons hi dans la méthode de rendu, je vais créer une nouvelle constante appelée name, et ce nom sera égal à ce .props.name. Après avoir extrait ce nom, je peux maintenant le remplacer par interpolation, le nom de la constante que je viens de créer. Si nous économisons maintenant, nous pouvons voir que pour le premier composant, « Bonjour, je m'appelle Bob », la valeur que nous avons envoyée ici, et pour le second, nous avons « Bonjour, je m'appelle Joe ». Tout ce qui est stocké dans cette propriété fait référence est une constante. Nous ne pouvons pas modifier la valeur d'une propriété. Par exemple, si je tape ici ce .props.name est égal à Daniel, et si nous sauvegardons, nous obtiendrons l'erreur suivante indiquant que nous ne pouvons pas nous attribuer une nouvelle valeur à une propriété. Gardez à l'esprit que les propriétés sont constantes. Cependant, ce que nous pouvons faire, c'est d'utiliser la destruction JavaScript, afin d'écrire moins de code lorsque nous extrayons nos propriétés. En ayant ces éléments en place, je peux maintenant supprimer les paragraphes statiques. Vous vous demandez peut-être si dans une application React, je peux dire qu'il y a un paramètre, autre chose en plus d'une chaîne, quelque chose comme, disons l'âge de ceux qui disent bonjour, et la réponse est bien sûr, oui. Je peux utiliser des nombres, des booléens, des objets ou même des fonctions comme paramètres. La seule différence est que pour les choses qui ne sont pas des chaînes, je devrai utiliser des accolades pour envoyer une valeur. Par exemple, si je veux ajouter ici un âge égal, et je dirai en accolades bouclées, 25. Si je veux envoyer ce 25 sous forme de chaîne, à l'intérieur de mon composant, cela sera également pris en tant que chaîne. C'est ici que nous allons utiliser des accolades pour envoyer un numéro. Dans la composante dites bonjour, cette structure, aussi cette propriété d'âge et ici ajouter quelque chose, « Mon âge est » et à l'intérieur des accolades bouclés l'âge. Si nous économisons maintenant, nous verrons que pour le premier composant, cela nous dirait que « Mon âge est de 25 ans », et pour le second, rien ne sera imprimé car nous n'avons pas envoyé d'âge propriété. 6. Événements de base l'UI: Dans cette leçon, nous allons examiner le fonctionnement des événements utilisateur React. Nos composants ne valent pas trop s'ils ne savent pas comment gérer les événements utilisateur. événement le plus utilisé est peut-être le clic de base. Supposons que nous voulions créer ce bouton pour nous afficher une alerte lorsque vous cliquez dessus. J'aurai ici une fonction appelée show message. Cette fonction show message aura une alerte indiquant quelque chose comme « Bonjour là ». React sait comment gérer les événements à l'aide des propriétés des fonctions. Certaines propriétés intégrées savent comment gérer les événements de base, comme OnClick. Je dirai que pour mon événement OnClick, je veux appeler cette fonction que je viens d'écrire. Je dirai ceci, cela montre un message. Après avoir enregistré, maintenant, si j'appuie sur ce bouton, nous recevrons l'alerte que nous venons de mettre dans la fonction Afficher le message et nous aurons d'autres événements. Par exemple, si nous voulons intercepter un événement d'entrée de souris, je vais simplement ajouter ici OnMouseEnter. Je vais pointer cet événement ce que OnMouseEnter et, bien sûr, je devrai aussi créer cette fonction. Pour l'instant, je vais juste ajouter un simple message de journal de console indiquant quelque chose comme « c'est sur la souris d'entrée ». Maintenant, si nous sauvegardons et ouvrons la console, nous verrons que tout le temps que nous passons sur le bouton, ce message sera imprimé dans la console. La documentation React contient une liste complète des événements de l'interface utilisateur que j'ai pris en charge. Je vais mettre ce lien dans la description de la leçon. Nous avons des éléments tels que le double-clic, le survol de la souris, la souris, les événements de clavier, événements de mise au point et bien plus encore. 7. Liaison d'événements: L'écueil le plus courant lors de la sélection d'utiliser les composants d'engrenage est peut-être la fixation de la portée. Quelle est cette liaison de portée ? Disons que nous connaissons la situation actuelle. Un bouton doté du gestionnaire OnClick et OnMouseEnter. Plus tard dans notre application, nous avons besoin de plusieurs de ces boutons. Dans ce cas, je souhaite créer une nouvelle classe appelée MyButton. Ce MyButton retournera simplement un bouton auquel sont attachés ces gestionnaires OnClick et OnMouse. À l'intérieur de l'application, je vais supprimer les gestionnaires et au lieu du bouton HTML standard, j'utiliserai simplement cette classe MyButton que je viens de créer précédemment. Comme nous l'avons dit, nous voulons avoir deux de ces boutons dans notre application. Maintenant, la partie intéressante, ce sera pouvoir personnaliser ces deux jeux de boutons, les deux affichent maintenant exactement le même message. Nous pouvons le faire en utilisant une propriété. Je dirai ici que pour le premier bouton, le message est égal à un message. Pour le deuxième bouton, le message est égal à un autre message. Ayant ces propriétés, je peux venir ici maintenant dans l'alerte et utiliser à la place du message standard, quelque chose comme this .props.message. Cependant, lorsque nous cliquons sur le bouton, nous verrons que nous obtiendrons cette erreur : « Impossible de lire les « accessoires » sur les éléments non définis. C'est en raison du problème que nous avons mentionné précédemment au sujet de cette combinaison. L'idée est que lorsque nous passons devant le manutentionnaire, nous sommes dans un contexte différent et React ne connaît pas la classe cargo. Pour résoudre ce problème, nous avons deux options. La première option consiste à lier la fonction ShowMessage à cet élément. Si nous sauvegardons, nous pouvons voir maintenant que si je clique, nous obtiendrons le message d'émission, et si je choisis le second, j' obtiendrai un autre message. Mais d'une manière ou d'une autre, c'est un peu encombrant de toujours ajouter à un gestionnaire qui se lie à cela. Nous pouvons l'utiliser dans notre avantage. Le fait que les fonctions de flèche d' ECMAScript 6 sont directement liées à l'étendue parente. Par cela, ce que je peux faire est de prendre ce ShowMessage et d'en faire une fonction de flèche. Maintenant, je peux facilement supprimer la liaison et si je clique, les choses fonctionneront comme prévu. En règle générale, chaque fois que nous utilisons des classes ECMAScript 6 pour créer leurs composants, utilisez toujours des fonctions de flèche afin de créer des gestionnaires d'événements. 8. État de composant: L'état React nous permet de gérer le changement de tous les éléments depuis React Components et de mettre à jour les visuels en conséquence. Afin d'introduire ce concept d'état dans les composants React, simulons le comportement des utilisateurs qui se connectent à une application. Au départ, nous avons ces deux boutons. Nous avons cliqué sur des canards terrestres attachés à eux. Si je clique sur ce bouton, nous obtiendrons le message de journal de console suivant et si je clique sur celui-ci, nous recevrons un autre message de journal de la console. Cela se produit car ici, j'ai configuré OnClick pour être connecté à l'utilisateur et connecté à l'administrateur. Cela dit, ce que je veux arriver dans l'application finale, c'est également d'afficher ici le type d'utilisateur actuellement connecté. Par exemple, si je clique sur « Se connecter en tant qu'administrateur » ici, il faudra que le type d'utilisateur soit administrateur et si je clique sur « Se connecter en tant qu'utilisateur standard » ici, il devra guider le type d'utilisateur utilisateur. Pour utiliser l'État, nous devons d'abord le déclarer. Lorsque vous utilisez Enigma sauter six classes, nous pouvons déclarer l'état en attente. La méthode la moins verbale consiste à utiliser des attributs de classe. Quelque part ici, je dirai que l'état est égal, et l'état d'un composant React est toujours un objet contenant les variables d'état. Dans notre exemple, nous n'avons besoin que d'une de ces variables et elle s'appellera UserType. Au départ, il aura la valeur d'une chaîne aucune. La deuxième façon de déclarer l'état se trouve à l'intérieur du constructeur de classe et la syntaxe ressemble à ceci. En fin de compte, le résultat est le même que celui cette fonction constructeur prend un peu plus de temps à écrire. Je vais l'enlever et utiliser la variation initiale. Ce que je peux faire ici après la déclaration de l'état, c'est que je peux entrer ici et écrire ce .state et je dirai que je veux afficher le type d'utilisateur. Même si dans le moment où nous économisons, nous verrons que le résultat est exactement le même. Ce que nous pouvons faire en mettant en place ce mécanisme d'état, c'est qu'ici, je peux remplacer le message du journal de la console par une méthode appelée set state et ceci .setState est toujours la méthode que nous voulons utiliser pour modifier l'état dans un Composant React. Ce que je vais faire, c'est lui donner un objet avec les choses que je veux changer dans cet état. Ici, je dirai que le type d'utilisateur, je veux être défini sur utilisateur. Pour le deuxième message de journal de la console, j'aurai ceci .setState et je dirai que le type d'utilisateur doit être changé en admin. Voyons ce qui se passe maintenant une fois que j'ai sauvé. Si je vais ici et que j'appuie sur « Se connecter en tant qu'administrateur », j'aurai le changement de texte dans le type d'utilisateur administrateur et ici, si j'appuie sur « Se connecter en tant qu'utilisateur standard », le type d'utilisateur est utilisateur. Ce que j'ai réussi à accomplir, c'est que cet état d'un composant soit mis à jour, mais aussi les visuels de ce composant doivent être modifiés en conséquence. Quelques points que j'aimerais souligner. abord, utilisez toujours l'état défini pour modifier l'état. Si nous pouvions simplement faire quelque chose comme This.STATE.UserType est égal à quelque chose. Lorsque j'enregistrerai, tout d'abord, nous verrons que nous recevrons un avertissement sur notre console, mais aussi si nous appuyons sur le bouton utilisateur, aucun changement ne se produira sur notre écran. Cela se produit car même si l'état change, la méthode de rendu n'a pas été appelée. Si nous voulons que notre interface utilisateur soit également mise à jour, toujours ici, avez quelque chose comme ceci. SetState et tout ce que nous voulons changer. La deuxième observation sera que nous devons toujours initialiser l'état avant de l'utiliser. Par exemple, si je supprime ici l'initialisation de notre état si nous sauvegardons, nous verrons que nous obtenons une boîte d'erreur indiquant que nous ne pouvons pas utiliser quelque chose comme UserType tant que cet état n'est pas initialisé. Enfin, le troisième, This.setState fusionne ce paramètre avec l'état actuel, il ne remplace pas l'état actuel. Fondamentalement, ce que cela signifie, c'est que dans l'état initial, si j'aurai une nouvelle variable d'état de x définie sur cinq, quand j'appellerai LoginUser ou LoginAdmin, cet état défini et je donnerai une nouvelle valeur pour le Type d'utilisateur. Seul ce type d'utilisateur sera modifié. Le x initial sera réglé sur cinq et aucun changement ne sera apporté, puis nous l'aurons. Ce sont les premières étapes, mais aussi les premiers pièges que vous rencontrerez lors de l'utilisation de React SetState. 9. Styles: L'objectif de cette leçon est de voir comment nous pouvons utiliser CSS afin de styliser nos composants React. À la fin des leçons, nous voulons pouvoir créer des composants qui ressemblent à des carrés et que nous puissions spécifier la couleur d'arrière-plan de ce carré. En tant que configuration initiale, j'ai déjà ici le carré de classe, un composant qui ne renvoie qu'une div et qui nous obtient une propriété de texte, et ce texte est affiché à l'écran. La première chose que nous voulons faire est de joindre un fichier CSS à ce index.js. Pour cela, j'irai ici pour créer un nouveau fichier. Ce fichier sera enregistré sous le nom index.css. Ce qui est intéressant dans React, c'est que nous pouvons importer pour chaque fichier des fichiers CSS dont nous avons besoin. Ici, je peux dire que je veux importer, et à partir du dossier actuel, importer, index.css. Juste pour voir que tout fonctionne, j'irai ici et je prendrai l'attribut HTML. Je dirai que je veux qu'une bordure grise de pixels blancs soit attachée à celle-ci. Maintenant, si nous disons, nous pouvons voir que fondamentalement l'index js et l'index css sont maintenant liés, et les styles du CSS sont appliqués dans mon fichier index.js. Connaissant cela et ayant comme objectif final, composants comme celui-ci, je retournerai dans l'index CSS et ici créer une classe appelée square. Je vais commencer à lister les propriétés CSS dont j'ai besoin pour que nos divs ressemblent à celles de l'image. abord, je vais devoir ajouter une bordure noire d'un pixel. Après cela, je dirai que la hauteur de ligne de notre texte est de 100 pixels. De plus, la largeur de nos composants est de 100 pixels. J'ai aussi besoin d'aligner le texte, mis au centre. Enfin, nous aurons besoin d'un peu de marge de 10 pixels. Ce carré de classe nous donnera la disposition de base de nos composants. Maintenant, si nous allons dans l'index CSS, ce que nous pouvons faire, c'est venir ici, et dire ClassName est égal. Je dirai que je veux que cette div ait une classe de carrés. Si nous sauvegardons, nous verrons que nos divs ont également les propriétés CSS répertoriées dans cette classe. Une chose que je voudrais souligner est le fait qu'ici j'ai utilisé le ClassName pour attribuer une classe CSS à un attribut HTML. C'est parce que dans le monde JS, nous avons déjà la classe comme mot-clé. Dans des circonstances normales, vous devez utiliser un ClassName pour attribuer des classes CSS à des balises HTML. Notre exemple n'est toujours pas complet. Ce serait bien de pouvoir dire qu'il s'agit d'un carré rouge et d'un carré jaune. Pour cela, nous utiliserons les styles de React. Dans un composant React, il est possible de définir un attribut de style qui reçoit en tant que paramètre, un objet contenant ces instyles de ce composant. Maintenant, je vais dire ici quelque chose comme, le style est égal. Disons que la couleur est d'abord rouge. Si nous sauvegardons et revenons dans notre application, vous verrez maintenant que nos deux carrés ont désormais un texte rouge. Mais ce qui est intéressant, c'est que nous pouvons associer ces valeurs à la valeur d'une propriété. Je peux venir ici et dire que la couleur est égale au rouge. Pour celle-ci, la couleur est égale au jaune. Enfin, nous pouvons changer la valeur de départ du rouge ici pour ce .properties, et je dirai la couleur. Si nous économisons, nous verrons que pour le premier carré, la couleur est rouge. Pour la dernière, la couleur est jaune. Pour le définir comme couleur d'arrière-plan, je vais juste avoir ici pour écrire, c'est une couleur d'arrière-plan, et CamelCase la couleur a fonctionné. Si nous économisons, nous verrons enfin la sortie souhaitée. En conclusion, gardez à l'esprit que nous pouvons joindre des fichiers CSS à nos composants React, et nous sommes en mesure de styliser ces composants ou en utilisant le ClassName et en y attachant une classe CSS spécifique. Ou en utilisant des styles en ligne avec cet attribut de style afin d'ajouter plus de flexibilité à notre style. 10. Comment utiliser l'objet React enfants: Bonjour et bienvenue. Il y a de fortes chances que vous ayez déjà entendu parler de ces données pour les enfants. Essentiellement, les sondes utilisées par les enfants lorsque vous avez un composant réact comme cette galerie. Vous souhaitez utiliser à l'intérieur le contenu HTML via la déclaration de composant reçue. Pour l'instant, nous avons une galerie d'images vide. Si je veux ajouter du contenu ici, disons que cette balise de paragraphe simple et ce paragraphe doivent être rendus dans notre composant Galerie. Je peux aller écrire à l'intérieur d'accolades bouclées, ce qui soutient leurs enfants et c'est fait. Nous l'avons fait fonctionner. Bien sûr, nous remplaçons ce texte, nous oublions l'image et nous avons nos parents chats dans la galerie. Mais React sait également comment afficher plusieurs éléments enfants, pas un seul. Personne ne peut nous empêcher d'ajouter une photo de plus car vous ne pouvez jamais avoir assez de photos. Si nous nous rafraîchissons, nous avons une nouvelle photo à bord. Si vous jetez un coup d'œil à la documentation React js, vous verrez qu'il existe en fait cet objet enfant qui nous donne accès à un ensemble de méthodes. C'est peut-être une bonne idée de vérifier plus tard toutes ces méthodes ici. Par exemple, si vous souhaitez afficher le nombre d'éléments enfants de votre composant, vous pouvez utiliser la méthode count. Afin de ne pas avoir à écrire tout le temps réagir que les enfants, j'ajouterai l'objet enfants en tant qu'importation distincte. Maintenant, je vais créer un nouveau paragraphe avec du contenu et utiliser ici children.count et le passer, que voulons-nous compter ? Après le rafraîchissement, nous pouvons voir maintenant que nous avons également à l'écran le nombre d'enfants. Si nous voulons forcer notre composant de galerie à recevoir un seul enfant, nous ne pouvons utiliser que des enfants, et ainsi de suite. Mais la méthode enfants la plus utile est peut-être la carte qui l'utilise, nous pouvons passer par tous les enfants et les mapper à notre élément de retour. Dans notre cas, nous pourrions dire quelque chose comme des enfants, cette carte plus cette fonction anonyme. Il faudra un enfant à la fois et renverra ce qu'il doit être affiché. Pour l'instant, la sortie est exactement la même, mais qui est cool, c'est que nous pouvons maintenant contrôler ces éléments. Par exemple, si nous voulons que notre bibliothèque n'autorise que les images en tant qu'enfants, nous pouvons dire ici, si un élément de ce type n'est pas égal à l'image, alors lancez une nouvelle erreur. Pour l'instant, tout est le même qu'avant, mais si j'ajoute dans la galerie, disons h1, eh bien, nous obtiendrons cette erreur, nous devrons supprimer cela pour l'instant juste pour que tout le code fonctionne à nouveau. Une autre chose pour laquelle nous pouvons utiliser la carte est de manipuler les éléments partagés et non seulement pour les restreindre. Par exemple, si une image ne possède pas d'attribut title, nous aimerions en ajouter un par défaut. Ce paramètre d'élément est de type via un composant. On peut dire ici quelque chose comme s'il n'y a pas d'élément qui supporte ce titre, alors l'élément qui supporte ce titre équivaut juste au chat. Nous allons recevoir cette erreur maintenant. Eh bien, vous vous souviendrez peut-être que l'accessoire est terminé via le composant en lecture seule. Heureusement, nous pouvons contourner ce problème en utilisant l'élément clone. Nous allons attribuer cet élément à un clone de lui-même. Mais dans un élément de clone React, nous pouvons également passer un deuxième paramètre pour configurer de nouvelles propriétés. Dans notre cas, je vais définir le titre comme un chat, et nous devrions être prêts à partir. Lorsque j'enregistrerai, nous verrons que lorsque nous inspecterons cet élément, nous obtiendrons également ce look d'API de titre par défaut. J'espère que vous avez apprécié cette émission sur les tutoriels de l'application. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires ci-dessous. Je suis Daniel et je vous vois la prochaine fois. Applaudissements. 11. Créer un jeu avec React partie 1: Bonjour et bienvenue. m'appelle Daniel et je serai votre instructeur pour cet exemple pratique de VRGS. Notre objectif pour ce tutoriel sera de construire ce jeu très simple de rock, de papier, de ciseaux. Dans ce jeu, nous avons deux joueurs, le rouge et le bleu. Lorsque nous plaçons le bouton « Exécuter le jeu », notre jeu affiche une animation aléatoire et sélectionne aléatoirement l'un des éléments entièrement disponibles. En fonction de ce qui est sélectionné pour chaque joueur, notre application décidera lequel des joueurs est le gagnant. Mettons-nous au travail. Dans le modèle de démarrage de ce projet, je travaille sur l'installation de NPM. Si vous ne l'avez pas encore fait auparavant, vous pouvez voir dans les liens de cet épisode un guide sur la configuration de votre environnement. Une fois l'installation de NPM terminée, nous pouvons taper NPM start et notre application devrait être opérationnelle. Jetons un coup d'œil à ce que nous avons actuellement dans le code de départ. Tout d'abord, le fichier index.js, qui ne fait que rendre notre application. En plus de cela, nous avons cette application, CSS, qui contient les styles de notre application. Maintenant, étant donné qu'il s'agit d'un cours ReactJS, nous ne discuterons pas trop de détails sur la façon dont les styles CSS ont été créés. Ce n'est qu'en cas de besoin que nous traiterons des parties CSS importantes pour notre application. partie la plus importante est cette application que le fichier JS, qui servira de point d'entrée pour notre application. Pour l'instant, il n'affiche qu'un simple composant React qui n'a qu'une div vide. La première chose que nous allons aborder est la création de ces deux cartes de joueurs. Si nous y réfléchissons un peu, sont des composants apatrides qui dépendent de deux propriétés, la couleur du joueur et le symbole. Dans cette optique, je vais revenir dans le code et créer un nouveau composant sans état. Ce composant sans état sera nommé carte de joueur. Au départ, notre carte de joueur ne sera qu' une div vide avec un nom de classe défini sur carte joueur. Ce nom de classe est déjà défini dans le CSS de l'application et affiche le rendu de base de nos cartes. Maintenant, avec ce composant sans état créé, je peux revenir à la méthode de rendu, et ici ajouter deux nouveaux composants de type carte de lecteur. Maintenant, après avoir enregistré et actualisé la page, nous pouvons voir à droite les deux nouveaux composants créés. Comme nous l'avons déjà dit, nos cartes de joueur dépendent de deux propriétés. Ils dépendent de la couleur et du symbole. Avec les nouvelles propriétés déclarées, je vais définir la couleur de la première carte sur rouge et son symbole sur papier. Pour le second, je vais définir la couleur sur le bleu et le symbole sur rock. Pour m'assurer que tout va bien, je retournerai dans le composant de la carte de joueur. Ici, je vais afficher la propriété symbole. Après avoir sauvegardé, nous pouvons voir maintenant que nos composants possèdent également les symboles donnés. Vous vous demandez peut-être pourquoi les textes du deuxième composant sont écrits à l'envers. Eh bien, c'est parce que dans le fichier CSS de l'application, nous avons une règle spéciale dont nous discuterons à la fin du prochain épisode. Si nous revenons à notre dernier exemple, chacune de ces cartes doit être colorée dans la couleur correspondante. C'est une excellente occasion d'utiliser les styles en ligne de React. Pour cela, je vais créer un nouvel objet appelé style, et à l'intérieur, je mettrai l'arrière-plan pour qu'il soit égal à ce que nous recevons du paramètre de couleur. Enfin, dans l'instruction return de la méthode de rendu, je vais attribuer le style de la div à l'objet style que nous venons de créer. Maintenant, après avoir sauvé, nous pouvons voir que nous avons une carte de joueur colorée en rouge et l'autre en bleu. 12. Créer un jeu avec React partie 2: Bonjour, et bon retour. Dans la première partie, nous avons ajouté les éléments de base de notre jeu. Nous allons maintenant faire en sorte que notre jeu sélectionne un symbole aléatoire. Pour y parvenir, nous devrons d'abord dire au jeu quels sont les symboles disponibles ? Je vais aller dans l'application principale et ajouter un constructeur par défaut qui, pour l'instant, ne fait qu'une super bobine avec les propriétés par défaut. L'étape suivante consistera à ajouter des champs de symboles sous cette référence. Il pointera vers un tableau contenant tous les symboles disponibles gratuitement, des pierres, du papier et des ciseaux. Nous aurons également besoin d'un bouton pour commencer le jeu. Je vais aller dans le rendu principal ici, ajouter ce bouton avec le texte Exécuter le jeu. J'ajouterai également une méthode de jeu qui, au départ, a juste un simple journal de console avec le texte de démarrage du jeu. Cette méthode sera affectée à l'événement on click du bouton. Après avoir enregistré, si j'ouvre la console, nous verrons que chaque fois que nous appuyons sur le bouton, ce message apparaît dans la console. Avoir le set en place. La prochaine étape logique consistera à apprendre à notre jeu comment faire des éléments aléatoires en bas du clic. Fondamentalement, nous devons générer un index aléatoire et extraire l'élément correspondant de ce tableau. abord, je vais créer l'index aléatoire et lui donner un nom d'index. Pour générer le nombre aléatoire, j'utiliserai Math.Random, et nous le multiplierons par le nombre maximum de symboles dans notre cas, trois. Nous utiliserons également Math.Floor pour nous assurer que nous n'obtiendrons pas numéros comme 2,5 ou 1.3 ou quoi que ce soit qui n'est pas un nombre entier. Avec cet index aléatoire construit, nous pouvons simplement faire un journal de console de ces symboles, de ces symboles et de l'index. Maintenant, si nous actualisons la page, lorsque nous appuyons sur le bouton, vous obtiendrez un élément aléatoire après cela, un autre, un autre, etc. Mettons ces symboles aléatoires dans la vue maintenant. Nous devrons remplacer cette valeur statique et celle-ci, nous avons quelque chose comme l'élément aléatoire généré ici. C'est un exemple parfait pour utiliser l'état des composants. abord, je vais remplacer cela par ceux qui indiquent PlayerRed, et aussi pour celui-ci, je vais les écrire cet état, PlayerBlue. Ces deux valeurs d'état seront définies dans la méthode Run game. Étant donné que nous devons traiter des propriétés d'état, nous devrons utiliser ce SetState et lui transmettre un objet. À l'intérieur de cet objet, je dirai que le PlayerRed est égal à ces symboles, et en tant qu'index, je vais coller toute cette formule. Nous réutiliserons exactement la même formule, mais cette fois pour le PlayerBlue. Nous allons le supprimer et l'ajouter du code et après l'avoir enregistré, nous verrons que nous obtenons une erreur. En effet, ici, nous essayons d'accéder à quelque chose de l'État et nous n'avons pas encore créé cet État. C'est très facile à résoudre. Je vais entrer dans le constructeur et un guide indiquant que cet état est égal à un objet vide et avec cet ensemble en place, je retournerai dans la fenêtre du jeu et maintenant nous verrons que chaque fois que nous appuyons sur le bouton Exécuter, nous obtenons un symbole aléatoire affiché sur notre écran. Allons jeter un coup d'œil à la version finale de notre jeu. Ici, nous avons ces belles icônes pour les symboles et non pour le texte statique. revenant au code du dossier public, nous avons ce dossier d'images contenant les trois icônes de symboles. Ils ont tous une extension png. Pour intégrer cela dans notre projet, j'utiliserai le dossier de propriétés de l'image d'arrière-plan des styles en ligne. Ici, je vais définir que l'URL sera le dossier d'image, plus le symbole correspondant et l'extension de fichier png. Nous supprimerons le code formel et maintenant, si nous sauvegardons et exécutons le jeu, vous verrez que nous avons également ces icônes à l'écran. Vous vous demandez peut-être pourquoi cette deuxième image est pivotée de 180 degrés. Eh bien, c'est à cause de cette propriété CSS que j'ai ajoutée ici et qui définit que, pour le deuxième élément de ce type, nous devrions avoir une échelle CSS et un flip CSS comme filtre. 13. Créer un jeu avec React partie 3: Nous avons obtenu la chance de notre application. Notre jeu a maintenant une mise en page de base, sait dessiner des symboles aléatoires et comment afficher les icônes correspondantes pour les symboles. Une chose que nous pourrions faire ensuite est de montrer ces animations aléatoires lorsque vous appuyez sur le bouton. Il existe plusieurs techniques que nous pouvons utiliser pour parvenir, mais pour le bien de notre exemple, choisissons simplement celle de JavaScript pur. En JavaScript, nous avons deux temps principaux de fonctions. Tout d'abord, nous avons le SetInterval, et deuxièmement, le SetTimeout. Pour les deux. L'idée principale est qu'ils exécuteront une fonction spécifique après un certain temps. Nous leur donnons une fonction à exécuter et le délai d'application à cette fonction. La principale différence entre eux est que SetTimeout va exécuter qui donne une fonction juste une fois. Pendant ce temps, SetInterval l'exécutera jusqu'à ce qu'il soit annulé. Étant donné que dans notre exemple, cet effet d'affûtage est réalisé à partir de plusieurs porcs aléatoires, il utilisera la fonction d'intervalle défini. Cela dit, ce que nous devrions faire maintenant, c'est revenir dans notre code. abord, je vais prendre toute cette partie qui génère les symboles aléatoires enroule dans une fonction et j'utiliserai cette fonction avec le SetInterval. Je vais définir un intervalle de 100 millisecondes, ce qui signifie qu'il y a un dysfonctionnement qui sera exécuté toutes les 100 millisecondes jusqu'à ce qu'il soit annulé. Après avoir enregistré, si nous plaçons le bouton Exécuter le jeu, nous verrons l'animation en action. Cependant, les choses ne sont pas encore terminées. Un problème auquel nous sommes confrontés maintenant est que notre animation ne s'arrête pas. Pour l'instant. Je vais simplement l'arrêter manuellement en actualisant la page, nous devons trouver un moyen d'arrêter l'exécution de cette fonction de manière programmatique. Si nous revenons à la documentation, nous découvrirons cette fonction intégrale claire que nous pouvons utiliser combinée à une référence à un intervalle spécifique. Sachant cela, le plan sera ainsi. Nous allons laisser la fonction s'exécuter 40 fois et après cela, nous utiliserons l'intervalle clair pour annuler l'exécution de notre fonction. Tout d'abord, je retournerai à la source. Ici, je vais créer une nouvelle variable appelée compteur. Ce compteur commence par la valeur zéro dans un nouveau jeu. Chaque fois que cette fonction s'exécute, ce compteur est incrémenté. Ensuite, nous aurons besoin d'une référence à notre intervalle. Pour cela, je vais définir une nouvelle variable appelée « intervalle ». Comme vous pouvez le voir, il indiquera le SetInterval. Après cela, j'utiliserai une déclaration pour vérifier si notre compteur a atteint un niveau supérieur à 40 et, dans l'affirmative, je dirai clairement l'intervalle de mon intervalle. Après cela, lorsque la page sera actualisée, lorsque nous avons recommencé, le jeu verra que notre animation s'arrêtera après 40 tours. La dernière étape, nous devrions apprendre à notre jeu comment décider du vainqueur. Pour cela, nous allons introduire une nouvelle valeur ou l' état appelé vainqueur et la définir initialement sur une chaîne vide. La décision sera prise dans une nouvelle fonction appelée le côté. Cette fonction sera appelée après avoir effacé le setInterval, étant donné que nous devons traiter des variables d'état, nous utiliserons la méthode Assist State et nous dirons que le gagnant doit être ceci .DecideWinner. à cette fonction, nous leur obtiendrons le résultat de notre jeu. Nous allons commencer par utiliser une instruction destructrice pour extraire la valeur bleue du joueur et rouge du joueur hors de l'état. premier temps, nous vérifierons si le joueur rouge est égal au joueur bleu, au cas où nous reviendrons que nous obtenons un résultat en duo. Ensuite, je vais vérifier si le joueur rouge n'est pas le gagnant. Étant une déclaration de journal, je vais simplement coller le code. Mais en gros, nous allons simplement vérifier ici les trois cas qui pourraient rendre le joueur rouge avec le gagnant. Dans ce cas, nous obtiendrons que le joueur rouge soit le gagnant. Enfin, si nous n'avons pas de résultat en duo et que le joueur rouge n'est pas le gagnant, on peut supposer que le joueur bleu a gagné la partie. Maintenant, il ne nous reste plus qu'à passer à l'intérieur de la méthode aléatoire. Ici, dans un paragraphe, je vais afficher la variable d'état du gagnant et fermer le paragraphe. Notre jeu doit être prêt à faire un essai routier. Si nous exécutons le jeu, il choisira pour le papier du joueur cible, pour le joueur bleu. Il nous dira que le joueur rouge vient de gagner. Cela a conclu notre demande. Dans cet exemple, nous avons vu en action des éléments tels que les composants React de base, les gestionnaires d' événements ou l'utilisation des fonctions de synchronisation JavaScript avec React. Merci d'avoir regardé et j'espère que ça vous a plu. Joyeux codage et on se voit la prochaine fois.