Les bases de React pour les débutants absolus | Créer votre premier site web portfolio

1. Introduction du cours: Salut, voilà. Bienvenue dans ce cours sur les principes fondamentaux de React. Je suis Fazal, un entrepreneur passionné de technologie qui a à cœur vous aider à maîtriser technologies modernes qui peuvent vous faciliter la vie et celle des autres Maintenant, dans ce cours en particulier, nous allons aborder les principes fondamentaux de React, et je vais aborder un large éventail de sujets dans ce cours en particulier. Nous allons donc commencer. J'ai donc ce programme ici. Tout d'abord, j'ai les avantages du cours et je vous explique pourquoi vous devriez suivre ce cours Pour commencer, nous allons commencer par un aperçu de React, de ce qu'est React et du développement Web. Nous aurons donc un aperçu complet de la façon dont les choses fonctionnent lorsque vous travaillez avec React. Ce serait faire la mise en place d'un projet, non ? Et pour la configuration du projet, nous utiliserons le code VS et Wheat. Ces deux outils sont comme des outils de production utilisés pour le développement Web. Nous allons donc en apprendre davantage sur eux. Nous allons découvrir GSX. Maintenant, qu'est-ce que GSX et tout cela, si vous n'avez jamais entendu parler de ces termes, ne vous inquiétez pas, j'ai ce qu'il vous faut dans le cours Ceci est juste un aperçu que je vous donne avec les sujets que vous devez essentiellement connaître. OK. Ensuite, nous parlerons des composants, des accessoires, des rappels Je vais donc aborder tous ces concepts. Ensuite, déstructurez et diffusez la syntaxe. Donc, comment vous pouvez utiliser la syntaxe de déstructuration et de propagation, qui est un concept JavaScript associé React ou React Web, c' est ce que je dois dire Ensuite, nous aurons un projet pratique dans lequel nous utiliserons tous nos apprentissages et nous le mettrons en œuvre pour créer un site Web de portfolio Maintenant, ce site Web de portfolio va vous donner une pratique complète de ce que vous avez appris pendant l'ensemble du cours, et il vous donnera suffisamment de confiance pour pouvoir créer des choses avec React. Maintenant, tout en tirant les leçons de ce cours, il y a quelques avantages. Premièrement, un cours pratique. Je comprends donc que lorsqu'il s'agit d' apprendre la technologie ou le développement, les étudiants préfèrent les cours pratiques l'utilisation minimale de diapositives. Je n'utilise donc que très peu de diapositives. Je m'occupe de tout, de l'Ovie de React au développement Web en passant par la création du site Web du portfolio. Tout est réglé d'une manière pratique. Maintenant, quand je parle d' Ovie of React et de la raison React a été inventé et pourquoi il existe réellement, donnez-vous des exemples dans le navigateur expliquant en quoi les choses ou quels étaient les problèmes qui existaient avant l'achat de React, et quand React est arrivé, comment il a et quand React est arrivé, résolu ces problèmes. Tout cela avec des exemples concrets. C'est pourquoi j'ai dit que les conférences étaient pratiques. Nous passons le plus clair de notre temps dans le navigateur et dans l'IDE. Et puis nous avons une fermeture à l'aide d'un projet. C'est donc l'un des avantages importants vous permet également de créer un site Web à la fin, savoir un site Web de portfolio. Voilà donc l'aperçu du cours, et à la fin de ce cours, je peux vous garantir que vous aurez une base solide avec React, ce qui vous donnera suffisamment de confiance pour apprendre des concepts beaucoup plus avancés matière de développement Web. De plus, ce cours particulier est accompagné d'un projet que vous pouvez consulter dans la section des projets. Au final, une fois le cours terminé, vous pouvez réaliser le projet, le soumettre et le partager avec l'ensemble de la classe. Alors, qu'est-ce que tu attends ? Je te verrai à l'intérieur de la classe. 2. Introduction à React: Salut, voilà. Bienvenue, et commençons à parler de React. Nous allons donc parler de ce qu'est React, raison pour laquelle une telle chose existe. OK ? Alors voilà, je suis sur Google, et je vais simplement taper react. Donc, dès que vous tapez React, vous allez accéder au site officiel de React, qui est React Point F. Maintenant, avant de visiter le site Web, permettez-moi de vous parler un peu de ce qu'est React. React est une bibliothèque, comme vous pouvez le voir ici dans la description, et c'est une bibliothèque JavaScript. Si vous connaissez un peu développement web ou si vous êtes ingénieur informatique, vous savez que le web se compose essentiellement de SGML, puis nous avons du CSS et nous avons même du JavaScript. Maintenant, qu'est-ce que le HTML ? Le HTML n'est rien d'autre que la pierre angulaire du Web. Donc, si vous cliquez avec le bouton droit sur quelque chose ici, comme sur n'importe quel élément, ce sont tous des éléments, n'est-ce pas ? Donc, si vous cliquez avec le bouton droit sur l'un des éléments, si vous dites inspecter. Je suis sur Chrome et j'ai cette option, inspecter. Et laissez-moi le noter. Vous allez voir tout le code ici. Vous pouvez voir tous les éléments HTML ici. Si vous êtes sur l'un des éléments, vous verrez l'élément HTML correspondant être surligné. Il s'agit d'un DIF. Le HTML est essentiellement constitué de balises, vous pouvez voir ici, de balises DIF Ensuite, nous avons le tag H two. Ce sont toutes des balises HTML intégrées que les navigateurs comprennent. Ce sont des navigateurs modernes qui comprennent ces choses. OK ? C'est donc du HTML. À quoi sert le HTML ? Il est utilisé pour définir les éléments. Maintenant, il ne suffit plus de définir les éléments. OK ? Tu dois les embellir. Par exemple, ici, vous voyez que cette réaction est surlignée en gras, n'est-ce pas ? Pourquoi est-il surligné en gras ? Parce que j'ai cherché React. OK ? Il y a un style particulier pour cela, non ? Vous pouvez voir que cela est surligné comme en gris clair, ce qui est un peu différent de ce qui se passe ici. C'est un lien, non ? Cela est donc mis en évidence différemment. Donc, si je clique avec le bouton droit ici et si j' inspecte, vous verrez qu'il s'agit des balises H trois et A. Ici vous pouvez voir un tag. Ainsi, en HTML, vous créez des liens à l'aide de la balise A. Maintenant, si vous développez un peu, c'est ici que vous verrez tous les CSS. Tu peux voir. Donc une balise, c'est la balise A, et ici vous pouvez voir le CSS, la couleur est définie comme le bleu. Si je change la couleur pour qu'elle soit rose ou rouge, vous verrez que la couleur est en train d'être modifiée dans le navigateur. Vous pouvez voir que c'est en temps réel. Si je veux remplacer cela par le jaune, quelle couleur souhaitez-vous ? OK. Vous pouvez donc changer de couleur. C'est ainsi que l'embellissement est ajouté aux pages Web. OK. Comme vous pouvez le constater, embellissement est contrôlé par le CSS Ce qu'est ce code, vous pouvez le voir ici, c'est du CSS. Donc vous dites pour un tag. Maintenant, qu'est-ce qu'un tag ? Un tag se trouve ici, c' est-à-dire si je passe le curseur sur un tag, vous verrez le tag correspondant être surligné ou l' élément correspondant surligné sur la gauche, lorsque vous survolerez le C'est donc la réaction, ce texte de réaction. C'est ce que c'est. Ici, vous avez du CSS pour la même chose. Un tag, ça dit tout. je survole Etag, vous verrez tous les tags électroniques surlignés sur le côté gauche, C'est donc là que toutes les balises sont utilisées, ce qui signifie que tous les liens sont affichés parce que ce sont tous des liens, n'est-ce pas ? Je veux donc que toutes les étiquettes électroniques soient de cette couleur. Je ne veux aucune sorte de décoration de texte. C'est ce que tu définis ici. OK ? Le curseur est remplacé par un pointeur. Donc, si je passe la souris dessus, vous pouvez voir que le curseur est en train d'être changé, n'est-ce pas ? Il est en train d'être remplacé par un pointeur. Je peux désactiver ça. OK. OK, ça ne me permet pas d' annuler ça, mais c'est bon. Le but est de comprendre ce qu'est le CSS ? Vous pouvez le voir en direct ici, non ? Je vais donc essayer de le ramener à la couleur par défaut. C' était quelque chose comme ça. OK. Le jaune et le vert ne semblent pas si naturels. Mais vous comprenez, c'est du CSS, non ? Ensuite, vous avez ce qu'on appelle un JavaScript. Maintenant, qu'est-ce que JavaScript ? JavaScript donne vie aux pages Web. Donc, n'importe quel type de validation que vous souhaitez effectuer dans les pages Web, n'importe quel type de fenêtre contextuelle que vous souhaitez afficher, vous pouvez faire tout cela. OK. Donc, si vous voulez voir JavaScript en action, nous pouvons accéder à l'onglet Console en haut de la page. OK. Et voici la console du navigateur. Donc ici, je peux dire alerte, et je peux simplement dire bonjour, quelque chose comme ça. Tu peux le voir. Voici l'alerte. Ainsi, pour toutes sortes de validations, fenêtres contextuelles ou de choses dynamiques que vous souhaitez faire, vous pouvez utiliser Ja Script OK ? Ja Script donne donc de la vie à vos pages Web. OK ? Maintenant, React React est une bibliothèque JavaScript. OK ? Rendez-vous sur le site Web de React et laissez-nous comprendre pourquoi cette chose existe. 3. Comment fonctionnait le Web avant React ?: Maintenant, voyons comment fonctionnait le Web avant React. OK ? Donc, ce qui se passait auparavant, c'est qu'il s'agit d'une page Web, et vous avez différents éléments interactifs ici. Je peux cliquer sur la barre NAF et passer à une autre page. Maintenant, lorsque vous chargez une page Web, HTML est chargé, le CSS est chargé, le script Ja est chargé. Maintenant, lorsque vous passez à un autre onglet ici, le tout est à nouveau rechargé Le code HTML est rechargé. Le CSS est rechargé et le Jascript est rechargé. Si je vais ici, encore une fois, tout sera rechargé. Cliquez sur Communauté, encore une fois, tout est rechargé. Ce n'est donc pas efficace. Vous savez, à chaque fois, même si le CSS et le Jascript ne changent pas et que c'est constant d'un bout à l'autre, nous les rechargeons OK ? Et ce n'est pas bon, non ? Ce n'est pas une méthode efficace, et nous, les humains, adorons être efficaces, n'est-ce pas ? C'est pourquoi React existe. Je vais donc vous expliquer en quoi React est différent. React est donc utilisé pour créer des applications Web d' une seule page. Qu'est-ce que cela signifie ? Donc, ce qui se passe, c'est que vous avez cette application Web, c'est une application Web. C'est une page Web. Il s'agit d'une application Web. Il y aura un cadre extérieur. Il s'agit d'un cadre et à l'intérieur, par exemple, il y aura des composants. Par exemple, la recherche est un composant. Ces onglets sont un composant de la barre de navigation. Vous pouvez créer une barre de navigation et y ajouter quatre boutons. OK ? Ce bouton est également un composant. Il s' agit également d'un composant. Ensuite, la partie centrale est également un composant. Toute cette page possède un cadre dans lequel sont placés des composants. OK ? Maintenant, ce qui se passe, c'est si vous voulez passer à l'apprentissage ici, vous pouvez voir que le principal élément ne change pas sur le site Web, n'est-ce pas ? Alors pourquoi voulez-vous le recharger ? Tu ne veux pas le recharger ? Vous pouvez simplement recharger cette partie inférieure, non ? C'est donc devenu possible avec l'aide de cette architecture basée sur les composants. Donc, au lieu de recharger toute cette page Web, même si la barre de navigation est constante, vous rechargez toute cette page, n'est-ce pas ? Ce n'est pas efficace, non ? Il consomme vos données, il consomme l'activité du réseau. Il consomme également puissance de traitement. Ce n' est pas efficace. C'est pourquoi ce système basé sur des composants est apparu où seul le composant modifié était rechargé Donc, si vous passez à la référence, seule cette partie sera rechargée Si je passe à cette option, seule cette partie sera rechargée. Voilà ce qu'est une application d'une seule page. Il s'agit donc en fait d'une application d'une seule page, comme une page, et les composants sont rechargés OK ? Et ils sont rechargés en fonction de l'endroit où vous interagissez et de la façon dont l' application est créée OK. C'est donc ce que sont les applications Web à page unique, et React est utilisé pour créer ce type d'applications Web à page unique. OK ? Donc, ce que Reacts vous permet de faire, c'est ici que vous pouvez le voir, cela vous permet de créer des composants. OK ? Maintenant, comme je l'ai dit, ici, cette chose est un composant, cette chose est un composant. Tous ces éléments peuvent être des composants que vous avez définis, puis vous pouvez avoir un cadre, dans lequel vous pouvez charger tous les composants. C'est ce que React vous permet de faire. OK. Et pourquoi cela vous permet-il de le faire ? Alors j'ai juste expliqué. Parce que si vous allez à la référence, je ne fais que recharger cette partie inférieure Je ne vais pas recharger cette barre de navigation. Je ne recharge pas ce message en haut, n'est-ce pas ? Seule cette partie inférieure est en cours de rechargement. Si je clique ici, seuls les éléments du côté droit sont rechargés Vous n'avez pas besoin de recharger toute la page Web à chaque fois, n'est-ce pas ? C'est donc ce que React vous permet de faire. Il permet de créer des composants. Vous pouvez créer des composants, d'accord ? Ainsi, par exemple, vous pouvez créer une barre de recherche en utilisant re, vous pouvez créer une barre de navigation en utilisant React, puis vous pouvez définir un cadre, et dans ce cadre, vous pouvez assembler tous les composants comme vous OK ? C'est donc de cela que parle ce truc. OK ? Il vous permet donc de créer interfaces utilisateur à partir de pièces individuelles appelées composants, et il propose également une démonstration incroyable sur le site Web, d'accord ? Ce site Web peut donc changer L'interface peut changer en fonction du moment où vous regardez cette vidéo. Mais en ce moment, je vois ce type d'interface sur le site Web. OK, si vous venez, ils ont cet exemple incroyable. Ne vous inquiétez pas si vous ne comprenez pas ce code. Ce que ce truc essaie de mettre en évidence ici, c'est qu'il y a des composants ici. Vous pouvez voir qu' il s'agit d'une interface. Notre interface que vous souhaitez montrer. Il s'agit d'une miniature vidéo. Ensuite, vous avez le titre de la vidéo , la description, le bouton J'aime, etc. OK ? Maintenant, ce que vous avez fait c'est que vous avez créé un composant appelé miniature, afin que vous puissiez voir ici la miniature Ensuite, vous avez créé un composant appelé bouton. Bouton J'aime. Vous avez un composant appelé vidéo. Tu peux voir. C'est la vidéo complète des composants, vous pouvez le voir, n'est-ce pas ? C'est donc réutilisable, comme vous pouvez l'imaginer, comme un bouton, si je veux l'utiliser ailleurs, je dois simplement utiliser cette balise. OK ? Miniature, je dois utiliser un autre endroit, je peux simplement utiliser cette balise. Demain, s'il y a un changement dans la miniature, je dois juste le faire à un endroit et cela se reflétera un endroit et Demain, si je veux changer le fonctionnement de l'animation de ce bouton ou modifier toute sorte d'interface utilisateur ici, je veux changer la couleur du bouton J'aime. Il vous suffit d'apporter des modifications là où vous avez défini ce bouton. Chaque fois que vous l'avez défini comme bouton, vous apportez cette petite modification et vous l'enregistrez, elle est déployée dans l'application. C'est ça la magie. La réutilisabilité, comme vous pouvez l'imaginer, est l'une des principales choses qui se présentent. Vous pouvez le voir ici. OK. Vous pouvez voir si vous travaillez seul ou avec des milliers d'autres développeurs, il en va de même pour React. Il vous permet de combiner facilement des composants écrits par des personnes indépendantes. Et ici vous pouvez voir, c'est incroyable, vous pouvez le voir ici. En utilisant un peu de JavaScript, le rendu a été effectué. Vous avez créé une vidéo ici. C'est une vidéo que vous avez créée et en utilisant JavaScript, vous êtes en train de le rendre trois fois, vous pouvez le voir. Trois vidéos. OK ? Et la syntaxe, c'est une syntaxe de balisage connue sous le nom de SX Donc, JSX est quelque chose que vous entendrez souvent lorsque vous travaillez avec React, d'accord ? Il s'agit donc de React et de son fonctionnement. OK. Je vous encourage donc tous à simplement consulter ce site Web. Aussi, pour vous donner un autre exemple, un peu interactif. Nous pouvons aller gagner de l'argent ici. Et si je fais défiler la page vers le bas, tu peux voir ceci. OK. Donc, ici, nous avons essentiellement créé une fonction. Il s'agit donc d'une fonction qui renvoie le bouton. Et disons que cela peut être n'importe quel bouton. Donc, pour le moment, c'est un bouton très simple, dit : « Je suis un bouton ». OK. Mais disons que si vous avez besoin d'une sorte de bouton spécifique à l'interface utilisateur et au message de votre application, vous pouvez le définir comme suit. Et voilà, ce que vous avez fait est là, je suis en train de rendre ce bouton ici. Tu peux voir mon bouton. Je vais donc vous dire que lorsque vous développez avec du HTML, vous avez des balises intégrées Vous avez ce tag H un, vous avez le tag H deux, vous avez le tag H trois. Et chaque tag a une signification, non ? H one tag a une signification, si vous écrivez quelque chose en utilisant H one tag, cela sera affiché de cette façon dans l'en-tête. Si je le remplace et que c' est comme un véritable éditeur, je suis donc autorisé à modifier le code ici. Donc, si je le remplace par H deux, comme ça, vous pouvez voir que cela montrera les choses différemment, d'accord ? La taille de police est un peu plus petite, d'accord ? Ainsi, chaque balise intégrée au HTML a sa propre signification. Vous pouvez donc voir ici qu' il s'agit de notre propre tag personnalisé. React vous permet donc de créer votre propre tag personnalisé ici. Nous avons défini notre propre balise personnalisée, Mon bouton. Il s'agit de la fonction, touche M, que nous avons définie. Quelle est la définition de MyButon ? C'est la définition. Donc, chaque fois que vous appelez MyButon, nous appelons Mbiton, nous utilisons Mbiton ici Chaque fois que vous utilisez mon bouton ici, celui-ci est renvoyé, et il est remplacé ici d'une certaine manière. Donc, tout cela est remplacé ici comme ça lorsqu'il est affiché dans le navigateur. Je vais juste faire le set Control. Je peux même te le prouver. Donc, si je clique avec le bouton droit de la souris ici et que je dis inspecter, voyons voir ce qui se passe ici. Je vais donc juste le démonter un peu. Je vais faire défiler la page vers la droite. Tu peux voir. Ici, vous ne voyez pas mon bouton. Donc, en fait, nous écrivons Mbton dans le code. Mais ici, vous ne voyez pas Mybton. Ici, vous voyez ce code en cours de rendu. Vous pouvez voir Donc, ce qui se passe, c'est que partout où vous utilisez mon bouton, pendant l'exécution, cela sera rendu. La définition du bouton M va être rendue. Permettez-moi donc de reproduire cela. Je vais reproduire cela et vous pouvez voir qu'un autre bouton a été ajouté OK. Maintenant, si je change la définition, je suis A, laissez-moi dire que je suis un super bouton. Vous pouvez le voir, cela se reflète partout. Tu imagines cette magie ? Tout comme on change à un endroit, on change à un endroit. Je suis désolée, vous changez à un endroit et cela se répercute sur l'ensemble de l'application. Donc, si vous avez des boutons personnalisés, likes personnalisés, imaginez créer Instagram. Vous utilisez le bouton à plusieurs endroits, n'est-ce pas ? Et vous avez ce thème à maintenir. Vous créez donc un composant. OK ? Vous l'utilisez à plusieurs endroits, des milliers d'endroits. Vous devez apporter une modification au composant. Pas de problème. Tu viens faire un changement ici. Et cela se reflète dans l'ensemble de l'application. OK ? C'est donc ce que vous pouvez utiliser ce composant autant de fois que vous le souhaitez. Je peux simplement continuer à le rendre et vous verrez que vous pouvez voir la définition être remplacée ici. C'est donc l'avantage de React. Donc, comme nous l'avons compris, React encourage l'utilisation d'applications à page unique. Vous pouvez créer des applications Web d'une seule page. Vous pouvez essentiellement créer vos propres composants. Vous pouvez réutiliser ces composants. Cela favorise donc la réutilisabilité. Cela vous permet également de maintenir facilement votre code. Donc, si vous voulez apporter un changement, vous le faites à un seul endroit, il est reflété partout. Donc ça permet de garder les choses en ordre, d'accord ? De plus, React est très populaire de nos jours. Donc, si vous recherchez le salaire React dans votre région, d' où que vous veniez, vous pouvez voir, donc c'est payscale.com pour les États-Unis et vous pouvez voir, c'est le salaire actuel qui est payé aux développeurs de React ou même les développeurs full stack sont bien React ou même les développeurs payés De nombreux emplois exigent ces compétences, et il est important que vous l' appreniez en tant qu'ingénieur logiciel. Que vous soyez ingénieur backend ou qui que vous soyez, React est également utilisé de nos jours pour créer des applications mobiles OK. Donc oui, il est très important que vous compreniez ces choses et que vous commenciez à créer des choses en utilisant cette technologie. C'est donc React. Maintenant, comment écrire du code dans React ? Donc, pour écrire du code et réagir, vous avez besoin de NodJS. Maintenant, qu'est-ce que les nogs ? NoDGS n'est donc rien d'autre qu'un environnement d'exécution Jascript qui vous permet d'exécuter du code Jascript côté serveur C'est donc quelque chose pour lequel nous avons besoin d'un signe de tête G. Nous aurons également besoin de quelque chose appelé NPM. Maintenant, qu'est-ce que NPM ? NPM n' est donc rien d'autre qu'un gestionnaire de paquets pour JavaScript, d'accord ? Il est utilisé pour gérer les différents packages que vous utilisez avec JavaScript. Par exemple, il est utilisé pour installer des bibliothèques, des outils, des frameworks. Donc, si vous souhaitez utiliser React, vous devez utiliser ce gestionnaire de paquets. OK. Nous aurons également besoin de quelque chose appelé code Visual Studio. Donc ça va être l'IDE, d'accord ? Et nous allons l' utiliser et il offre également un excellent support pour le développement Web. Nous allons donc utiliser le code de Visual Studio pour cela. Donc, en ce qui concerne notre navigateur, nous allons nous diriger vers Google et rechercher Nodegs C'est quelque chose dont nous allons avoir besoin. Je vais cliquer dessus et vous pouvez le voir ici. C'est ici que nous devrons installer le nœud JS. Vous pouvez télécharger la version LTS de NodeJS. Vous pouvez le télécharger ici. Et vous pouvez même accéder à la page de téléchargement. Et si vous avez besoin de quelque chose de personnalisé, comme pour Windows ou Mac, vous pouvez obtenir la sélection ici. OK ? Le processus d'installation est très simple. Vous le téléchargez comme n'importe quel logiciel normal, et il vous suffit de suivre les instructions de configuration et d'installation. OK ? Une fois le téléchargement terminé, vous pouvez accéder à votre terminal et vérifier si l'installation a réussi. Vous pouvez donc prononcer le trait d'union V. Vous devriez voir cette version être imprimée se peut donc que votre numéro de version soit légèrement différent du mien. Parce que cela peut dépendre du moment où vous regardez cette vidéo et disponibilité d'une version plus récente. Mais ne vous inquiétez pas si le numéro de version est différent. Un numéro doit être imprimé. C'est ce qui devrait vous inquiéter. Ensuite, vous tapez NPM. Nous avons donc également besoin de ce gestionnaire de packages de nœuds. Et tu peux dire tiret. Cela devrait donc également imprimer un numéro Vosion. Ce n'est pas grave si c'est différent du mien. Mais nous avons besoin que ces deux éléments soient installés sur votre système. Il y a donc node JS, qui est le runtime JavaScript, et puis nous avons NPM, qui est un gestionnaire de packages Assurez-vous simplement d' avoir les deux. 4. Créer votre premier projet React: Salut, voilà. Il est donc temps de commencer à créer notre application React, et nous allons le faire à l'aide de la ligne de commande. Donc, tout d'abord, je vais me diriger ou naviguer via la ligne de commande dans le dossier du projet. Maintenant, ce que je veux dire par dossier de projet, c'est un dossier de mon choix dans lequel je souhaite organiser mes projets React, d'accord ? Donc, ce que vous pouvez faire, c'est vous rendre dans le Finder. Par exemple, si vous êtes sur Mac, vous pouvez accéder au Finder ou si vous êtes sous Windows comme moi, vous pouvez accéder à Explorer, d'accord et créer un dossier à l'emplacement de votre choix, vous pouvez appeler le dossier comme vous le souhaitez Je l'appellerais React. Ensuite, à partir de la ligne de commande, vous pouvez simplement accéder à l'emplacement où vous avez créé le dossier. J'ai donc créé ce dossier de réaction ici à cet emplacement particulier, et le CD est la commande, qui est le changement de répertoire, et il m'aide à naviguer ou à me rendre dans ce dossier en particulier ou à me trouver dans ce dossier depuis la ligne de commande. Maintenant que je suis dans ce dossier en particulier, je vais effacer tout le reste. C'est bon. Maintenant, dans ce dossier particulier, je vais commencer à créer mon application React. Et pour cela, je vais utiliser NPX, d'accord ? Oups. J'ai donc déjà créé quelques applications React auparavant. Vous pouvez donc voir cette suggestion ici, d'accord, mais je ne peux rien y faire. D'accord ? Mais ignorez cette suggestion pour le moment, car ce que fait ce terminal en particulier, c'est que, quoi qu'il voit dans votre historique, il ne cesse de vous suggérer, ce qui est une bonne chose. Vous montrer l'intégralité de la commande, c'est très bien. Donc, NPX, je vais utiliser NPX, d'accord ? Maintenant, NPX est une bonne syntaxe. Il est utilisé pour exécuter les packages de nœuds ou pour exécuter les packages. Ensuite, nous allons utiliser l'application Create React. C'est bon. Maintenant, qu' est-ce que l'application Create React ? L'application Create React est une sorte d'outil qui vous aide à créer l' ensemble de l'application React. Maintenant, pourquoi en faisons-nous usage ? Parce que le projet React doit être organisé d'une certaine manière, il doit avoir le dossier SRC, il doit contenir des fichiers, et tout cela est réuni pour des fichiers, et tout cela est réuni vous permettre ou permettre à votre application de fonctionner de manière fluide, n'est-ce pas ? Vous pouvez donc également créer ces fichiers manuellement, mais il s'agit d'un outil qui vous permet créer ou configurer correctement la structure de l'application. D'accord ? Ensuite, je vais simplement mentionner le nom de mon application, afin que je puisse l'appeler application MyRact, quelque chose comme ça D'accord. Et ce que je peux faire, c'est simplement appuyer sur Entrée. Au moment où j'appuie sur Entrée, cela va créer un dossier à cet emplacement particulier. Donc, à cet endroit précis, il va créer ce dossier. Pourquoi crée-t-il un dossier à cet emplacement ? Parce que j'ai accédé à ce dossier depuis le terminal, et ce sera le nom du dossier sous lequel existeront tous les fichiers de mon projet React D'accord ? Vous pouvez donc appuyer sur Entrée, et vous devriez voir une sorte de traitement se produire. Vous pouvez donc voir la création d'une nouvelle application React à cet endroit précis. Il est en train d'installer certains packages, ce qui peut prendre quelques minutes. Donc, il est en train d'installer il vous indique également ce qu'il installe. Il installe React, React Dom, React Scripts, et tout ce dont il a besoin. Nous attendrons donc un moment jusqu'à ce que tout ce processus soit terminé et que nous obtenions une confirmation. J'ai donc reçu la confirmation, et j'ai également reçu un message mineur. D'accord. Au moment où j'ai commencé à enregistrer cette vidéo, il y avait une nouvelle version mineure, disait que NPM était disponible, et elle me demandait si je pouvais effectuer une mise à niveau OK, donc je procéderai à la mise à niveau plus tard. Vous ne le verrez peut-être pas, d'accord, mais oui, je vais juste l' ignorer pour le moment. Il s'agit simplement d'une notification de mise à niveau. Vous pouvez voir la confirmation ici, joyeux piratage. C'est bon. Et si vous faites défiler la page vers le haut, vous verrez le processus complet de ce qui s'est passé. Nous avons donc exécuté cette commande ici. Oups. Laissez-moi faire défiler la page vers le haut. Nous avons donc exécuté cette commande ici. D'accord ? Si vous venez ici, vous pouvez voir qu'il a ajouté de nombreux packages. Cela a pris 36 secondes. Si vous venez ici, d'accord, cela signifie que cette application particulière a été créée avec succès à cet endroit et dans ce répertoire. Vous devez donc accéder à ce répertoire, et à l'intérieur de celui-ci, vous pouvez exécuter toutes ces commandes ici. D'accord ? Maintenant, une fois que vous avez navigué, il vous a donné des commandes prêtes à l'emploi, comme NPN start Il démarrera sur le serveur de développement. L'application React que vous avez créée est donc livrée avec un serveur intégré. Vous pouvez exécuter cette commande pour regrouper l'application et dans des fichiers statiques, essentiellement pour le déploiement en production Cela lancera le lanceur de tests au cas où vous souhaiteriez exécuter des cas de test, NPM run eject C'est quelque chose que tu peux exécuter. Donc, la suggestion est que vous pouvez commencer par l'exécuter ici. Je vais le copier. D'accord ? Je vais le coller ici. Je vais me diriger vers ce répertoire, d'accord, puis il vous indiquera NPM start Maintenant, il s'agit d'une commande à l'aide de laquelle vous pouvez démarrer un serveur de développement sur votre machine locale. Donc je peux aussi exécuter cette commande, d'accord ? Et vous pouviez voir l' application opérationnelle. C'est donc l' application, d'accord ? Vous pouvez voir que le navigateur s'ouvre automatiquement, et vous pouvez voir que c' est l'application qui fonctionne. Maintenant, il s'agit d'un serveur qui vous montre votre contenu qui exécute votre application React dans le navigateur. Maintenant, chaque modification que vous apportez aux fichiers, vous verrez des rechargements en direct se produire ici accord ? Maintenant, vous pouvez voir le message ici, comme si vous deviez modifier ce fichier en particulier et l'enregistrer pour le recharger D'accord ? Donc, cette interface provient de ce fichier en particulier, c'est ce qu'elle dit. Et si vous cliquez ici, voici le lien vers le site officiel de React. C'est ce à quoi il est lié. D'accord ? Vous pouvez donc aller sur ce site Web et consulter ou lire certaines informations également. C'est bon. Mais je voudrais mentionner quelques points ici : une fois que vous avez démarré le serveur de développement, vous pouvez l'arrêter en appuyant sur fois que vous avez démarré le serveur de développement, Ctrl et C sous Windows ou sur Command et C sur Mac. D'accord ? Je suis sous Windows, donc j'appuie sur Ctrl C, et vous pouvez voir que cela a mis fin à ce travail en particulier. Et voilà, si vous essayez de vous rafraîchir, cela ne marchera pas. D'accord, parce que le serveur est en panne, non ? Maintenant, pour que votre serveur soit opérationnel, vous devez exécuter NBM start dans ce dossier particulier D'accord ? Ce n'est qu'alors que votre serveur sera opérationnel. Ainsi, tout en développant, vous pouvez laisser le serveur allumé, modifier les fichiers, enregistrer et voir les modifications se produire en direct. D'accord ? Maintenant, je vais en dire un peu plus sur cette commande. Nous avons donc créé l'application React ou l'application complète à l'aide de cette commande particulière. Maintenant, vous pouvez également ajouter des options ici à la fin. D'accord ? Donc, ce que vous pouvez faire, c'est utiliser des modèles ici. D'accord ? Maintenant, supposons que lorsque vous travaillez avec React, vous souhaitiez également utiliser du tapuscrit D'accord ? Donc, si vous utilisez du tapuscript, vous pouvez ajouter quelque chose comme ceci Vous pouvez dire modèle ici, et vous pouvez dire type script. Je ne vais pas le lancer, mais ce n'est qu'une information supplémentaire. Cela permettra d'utiliser le modèle de dactylographie pour créer votre application et d'ajouter le support dactylographié dès le départ, ce qui est utile si vous travaillez sur un projet plus important qui peut bénéficier d'une bénéficier C'est bon. Vous pouvez donc utiliser cette commande de cette façon, d'accord. J'espère que cette commande est claire. NPX create react tap pour que le serveur ne soit pas ouvert, mais vous pouvez maintenant redémarrer le serveur en disant NPM run NPM start Je suis désolée C'est donc NPM Start, quelque chose comme ça Et si vous le démarrez, il redémarrera le serveur. C'est bon. J'espère donc que cela utile et j'espère que vous avez pu suivre. 5. Installer le code Visual Studio: C'est notre première application basée sur React, que nous avons créée, d'accord ? Ou je dois dire que nous n'avons pas créé. D'accord. Ce projet est donc généré automatiquement à l'aide de l'application Create React. OK, et cela nous donne également un indice ici. Vous pouvez modifier les points de l' application et enregistrer pour la recharger. D'accord ? Il contient un lien pour apprendre React, qui vous redirigera vers le site officiel de React. Très bien, jusqu'ici tout va bien. Voici donc notre application opérationnelle. Que devons-nous faire maintenant ? Nous devons commencer à coder et à modifier les choses. Et qu'allons-nous faire pour cela ? Nous allons installer un IDE qui est le code ID Visual Studio. D'accord. Voilà donc à quoi ça ressemble. Si vous l'avez déjà bien sur votre ordinateur, si ce n'est pas le cas, rendez-vous sur ce site officiel. Il s'agit d'un outil gratuit. C'est gratuit, basé sur l'open source, il fonctionne partout. Comme je suis sous Windows, cela m'invite à télécharger une version stable conçue pour Windows Vous pouvez passer au système d'exploitation dont vous avez besoin. Mais si votre système d'exploitation a un programme d'installation ici, il le fera automatiquement. Donc, si vous vous connectez depuis un Mac ici, cela vous indiquera le téléchargement depuis Mac. D'accord ? Donc, quelle que soit la plateforme à partir de laquelle vous l' ouvrez ce bouton s'affichera et vous pourrez le parcourir si vous ne savez pas ce qu'est le code de Visual Studio. Mais il suffit de le télécharger et l'installer comme n'importe quel autre logiciel. Je l'ai déjà installé, je ne vais donc pas vous montrer les étapes d'installation, mais les étapes d'installation ne sont pas du tout complexes. C'est très simple et direct. 6. Passer à Visual Studio Code: Maintenant, une fois que vous avez correctement installé le code Visual Studio, vous verrez une page comme celle-ci. Donc, si vous ouvrez le code Visual Studio, pour la première fois, vous verrez cette page de bienvenue. Maintenant, je suis un utilisateur de code Visual Studio depuis un moment, d'accord ? Et vous voyez tous ces projets récents. Il est donc probable que vous ne verrez pas la liste des projets récents tant que vous ne serez pas un utilisateur, d'accord ? Mais comme je l'ai dit, comme je l'ai dit, je vois la liste des projets récents que j' ai utilisés ou créés dans le passé. Vous verrez également ces options ici : nouveau fichier, fichier ouvert, dossier ouvert, clonage du référentiel Git, connexion à tout cela. C'est un outil très utile. Le code Visual Studio, je l'utilise tout le temps. Maintenant, pour ouvrir le projet, vous connaissez le dossier dans lequel vous avez créé le projet. Vous pouvez donc simplement cliquer ici, Ouvrir le dossier et vous pouvez accéder à l'emplacement du dossier dans lequel vous avez créé le projet. Sinon, si pour une raison quelconque vous ne le voyez pas, vous pouvez accéder au fichier dans les options du menu ici et vous pouvez dire « ouvrir un dossier ». Les deux sont identiques. Donc, ce que je vais faire, c'est sélectionner Ouvrir le dossier. Je vais accéder au répertoire de mon choix, et j'ouvrirai le projet ici. Maintenant, lorsque j'ai sélectionné Ouvrir le dossier, j'ai vu cette fenêtre de dossier, qui est Explorer, la parcourir jusqu' au dossier dans lequel j'ai créé l'application React Et je vais sélectionner ce dossier en particulier. Il s'agit de mon projet d'application React que nous avons créé. À l'intérieur, vous verrez quelques fichiers, mais vous devez sélectionner le dossier racine. Je vais dire sélectionner, et cela ouvrira ce dossier en particulier pour moi. Maintenant, je peux fermer cette page d'accueil ici, d'accord ? Vous pouvez donc voir le projet ici sur le côté gauche, d'accord ? Vous pouvez consulter l'intégralité de ce dossier. Si vous le décompressez, vous verrez les fichiers qu'il contient. OK ? Ainsi, lorsque vous avez exécuté la commande appelée Create React app, d'accord avec l'application Create React, elle a créé tout cela pour vous. Vous pouvez également le créer manuellement. Mais comme vous pouvez l'imaginer, cela va être très fastidieux, non ? Ainsi, cet outil particulier, Create React App, fait le travail à votre place , en configurant l'ensemble de la structure du projet pour vous. OK ? Nous passerons bientôt en revue cette structure de projet , mais pour le moment, je voudrais également expliquer que le serveur est opérationnel depuis le terminal. Maintenant, ce que je peux faire, c'est que je n'ai pas besoin d'utiliser un terminal externe. Le code Visual Studio a un moyen par lequel je peux réellement avoir un terminal dans le code Visual Studio. De cette façon, je n'ai jamais à quitter code de Visual Studio pour passer à un terminal local. Ici, en haut des options, je vais voir le terminal ici. Vous pouvez dire nouveau terminal, et vous pouvez voir qu'il s'agit d'un terminal intégré dans le code de Visual Studio. Et si vous dites PWD, qui est le répertoire de travail actuel, le terminal s'ouvre automatiquement dans le dossier que vous avez ouvert dans le code Visual Studio, qui est le dossier du projet Vous n'avez donc pas besoin de naviguer également, vous n'avez pas besoin d'exécuter la commande, CD, etc. et de naviguer, cela fonctionne simplement comme un terminal local. Donc ici, je peux dire que NPM recommence ici. Au moment où je dis, je vais avoir une erreur, vous pouvez voir que quelque chose fonctionne déjà sur le port 3 000. Et ce qui est en cours d'exécution, c'est notre application elle-même qui s'exécute, et elle nous demande si vous souhaitez plutôt exécuter l'application sur un autre port. Je ne veux pas faire ça. Je vais dire non. OK, et ça va juste arrêter l'exécution. OK ? Mais ce que je vais faire, c'est fermer ce serveur parce que je ne veux plus utiliser un terminal externe, vous savez, ici. OK ? Je veux m'en tenir au terminal fourni par Visual Studio, et je vais démarrer avec NPM, devrait maintenant exécuter le serveur de développement pour vous OK ? Donc, de cette façon, nous pouvons le déplacer vers une nouvelle fenêtre. Nous voici donc dans la nouvelle fenêtre, et j'ai du code Visual Studio en cours d'exécution dans la nouvelle fenêtre. Ainsi, je n'ai jamais à quitter le code de Visual Studio. Je peux même minimiser ça ici comme ça. OK ? Je peux même créer un nouveau terminal à partir d'ici, pour que vous puissiez voir plus, et vous pouvez avoir plusieurs terminaux fonctionnant ici. OK ? C'est très utile, et c'est la raison pour laquelle. Ce type d'outils fournis par Visual Studio code est donc la raison pour laquelle il est si apprécié par la communauté des développeurs. Maintenant, je vais également vous montrer la liste des extensions que j'ai. Donc, si vous allez dans cet onglet d'extension sur le côté gauche, vous avez quelques options comme la recherche, contrôle du code source, l'exécution et le débogage, tout cela, d'accord ? J'utilise également Docker dans certains de mes projets, vous pouvez donc également voir Docker ici Mais il se peut que vous ne le voyiez pas. OK ? Cela nécessite une extension séparée, d'accord ? Mais si vous optez pour l'extension. Maintenant, que sont les extensions ? Les extensions vous permettent donc d'améliorer ou d'étendre les fonctionnalités par défaut que code Visual Studio fournit déjà. Vous pouvez donc voir que j'ai une extension pour le bloc-notes Jupiter. OK. Chaque fois que je code en Python, et si je veux un support pour les blocs-notes, j'utilise cette extension. OK. J'ai donc cette extension. Cela n'est pas nécessaire pour réagir. J'ai l'extension Python. OK. Maintenant, cette balise renommée automatiquement peut être utile pour React car, vous savez, si vous renommez une balise, accord et s'il y a une balise de fermeture, cela aura pour renommer la version payante de cette balise en particulier OK, donc c'est quelque chose que tu peux avoir. C'est utile. Par exemple, si je dois vous donner un exemple, laissez-moi vous en donner un. Disons donc si je crée ou si je me permets d'ouvrir un fichier ici. OK, laissez-moi ouvrir un fichier HTML. Maintenant, ce truc, vous pouvez le voir, laissez-moi y aller , faites défiler la page vers le bas. Ce titre possède donc une balise d'ouverture et une balise de fermeture. Donc, à cause de cette extension particulière, si je renomme la balise d'ouverture, vous pouvez voir que la balise de fermeture est également renommée OK ? C'est donc l'avantage de cette balise renommée automatiquement. Vous n'êtes pas obligé de renommer abord la balise d'ouverture, puis renommer la balise de fermeture, La colorisation bêta, comme vous pouvez le constater à partir de l'icône elle-même, est utilisée pour que la couleur mette en évidence la paire de fermeture du support C'est utile si vous utilisez beaucoup de crochets dans votre Okay, Debugger pour Java, Debugger pour Java, Dev Containers, Jango Doco, tout cela que j' utilise pour d'autres langages, extension back pour Java, Gradle pour Java, Intel code. OK ? C'est pour le développement assisté par l'IA. C'est également pour cela qu'il s'agit d'exemples d'utilisation de l'API Intelicode. OK. J'en ai pour Python. Tout cela est donc lié à Python. Je vais faire défiler la page vers le bas, un serveur en direct. Nous n'avons pas besoin de ce Maven pour Java. Cela n' est pas non plus nécessaire. Prettier est quelque chose que vous pouvez utiliser. Cela formate le code. OK. J'organise le code pour vous. OK. Et oui, c' est ce que nous avons, OK. Je vais également ajouter quelques extensions dès maintenant ici. OK ? Donc, ce que vous pouvez faire, c'est rechercher des extraits de code React ici, quelque chose comme ça OK. D'accord, vous pouvez donc rechercher ES Seven plus React, quelque chose comme ça. Et vous verrez cette extension avec près de millions d'installations. Cela fait donc 12,9 millions au moment où j'enregistre cette vidéo. Bien entendu, cela continuera d'augmenter et vous verrez peut-être un chiffre différent lorsque vous regarderez ce film. Il s'agit donc d'une extension. C'est le nom ES seven plus react redux react native snippets Maintenant, cela vous donne des modèles, d'accord ? Par exemple, si vous voulez créer une fonction, vous pouvez dire RAFC Vous pouvez simplement le saisir et cela vous donnera la définition complète de la fonction. OK. Il dispose donc de ce genre de raccourcis, ce qui vous permet de gagner du temps. Vous pouvez donc l'installer. Je vais simplement cliquer sur Installer et l'ajouter à ma liste d'extensions. OK ? Donc oui, nous l' avons installé maintenant, d'accord ? Vous pouvez explorer d'autres plugins ou extensions React sur le marché ici et vous pouvez jouer avec. Vous pouvez également améliorer les fonctionnalités par défaut que le code Visual Studio vous fournit déjà. C'est bon. Donc oui, il s'agit de configurer le code Visual Studio, et j'espère que vous l'avez trouvé utile. 7. Explorer la structure du projet: Il est donc temps de commencer à comprendre la structure du projet React. Maintenant, lorsque vous ouvrez ou analysez l'application React que vous avez créée, vous verrez de nombreux fichiers. Certains d'entre eux sont également des dossiers. OK ? Vous voyez donc ici ce dossier de modules de nœuds. OK ? Et qu'est-ce que le module node ? Il s'agit d'un répertoire qui contient tous les packages NPM, tels que les bibliothèques, les dépendances sur lesquels repose votre projet Et au cours du développement de votre application React, vous n'aurez généralement pas besoin d'interagir directement avec ce dossier en particulier. OK. Donc oui, c'est quelque chose qui existe, vous devez savoir ce que c'est, mais vous n'allez pas y travailler. Dossier public. Désormais, ce dossier contient tous les fichiers statiques, comme le point d'index principal HTML, qui contient le div racine dans lequel votre React Tap est injecté. OK ? Si vous ne comprenez pas cela, ne vous inquiétez pas. Je vais expliquer cela, mais cela contient essentiellement une liste de tous les fichiers statiques. Comme vous pouvez le voir sur le fabricant vous pouvez voir quelques logos, manifeste Jason robot point HD et le point d'index HTML OK. Maintenant, qu'est-ce que le HTML à points d' index ? Maintenant, c'est le fichier dans lequel votre application React est injectée. Voici donc le code HTML standard, vous pouvez voir, d'accord, tout. Et ici, vous voyez le titre sous la forme React Tap. Ainsi, lorsque vous exécutez l'application, titre s'affiche sous la forme React Tap. Si vous changez le titre, je peux dire que l'application React a changé ici, quelque chose comme ça. Et si je sauvegarde ceci, si vous venez ici, vous verrez l'application React modifiée, n'est-ce pas ? Et chaque fois que vous apportez une modification, le serveur se recharge automatiquement. Donc, si j'ajoute trois idées, et si je sauvegarde ceci, vous verrez qu'il a été actualisé, n'est-ce pas ? Et si vous venez ici, les modifications sont également immédiatement répercutées sur le navigateur. Je vais donc m'en débarrasser. Je vais enregistrer ceci, et si vous revenez, vous verrez que c'est l'application React maintenant, n'est-ce pas ? C'est donc le fichier dans lequel votre application React est injectée, d'accord ? Et ici, si vous voyez à l'intérieur du corps, vous avez ce DIF. OK ? Maintenant, nous utilisons cette racine div pour injecter l' application React ici. OK ? Et comment nous procédons, je vais vous l'expliquer sous peu. Pour l'instant, comprenez simplement que l'index ou le HTML est un fichier dans lequel votre application React est injectée, et qu'il se trouve dans le répertoire public. Vous avez un dossier SRC. Maintenant, le dossier SRC est le dossier où toute la magie opère. Il contient tous les fichiers JavaScript de votre composant React, feuilles de style, les images, qui existent tous dans ce dossier particulier. Donc, essentiellement, tout le code source lié à votre application React sur laquelle vous allez travailler réside dans le dossier SRC En tant que développeur React, vous allez donc créer une application et vous passerez le plus clair de votre temps dans ce dossier en particulier. OK ? Vous avez Get ignore, bien sûr, si vous l'avez configuré ici, le log du package JCN OK ? Voici donc le JCNFle On peut donc dire que c'est le cœur du projet en ce qui concerne le gestionnaire de packages de nœuds, NPM, d'accord ? Il s'agit donc d'un fichier qui va répertorier toutes les dépendances utilisées votre application, d'accord ? Et selon les dépendances ce fichier en particulier, d'accord, toutes les dépendances seront récupérées à distance et ajoutées au dossier des modules du nœud C'est ainsi que cela va fonctionner. OK. Ainsi, chaque fois que vous ajoutez une nouvelle dépendance, le package JCN est toujours mis à jour C'est donc ce que fait Package GSN. OK. Mais maintenant, examinons le dossier SRC Donc, dans le dossier SRC, vous trouverez ce fichier appelé app point Qs Bien, avant d'explorer l'application point js, passons à l'index point Gs. Index point js est le point de départ de notre application React, n'est-ce pas ? Et c'est là que le composant de l'application est rendu. Je vais donc ouvrir index point js, je vais ouvrir l'application point js, et je vais simplement le réduire. OK ? Maintenant, si vous regardez le point d'index js, cela signifie que la racine se trouve ici. Vous pouvez voir le point du document Get element by ID, root. Maintenant, qu'est-ce que root ? Nous avons vu Root ici. Cela provient du code HTML à points d'index. Donc, index point js obtient cette racine et s'affiche. Vous pouvez voir le rendu des points racines ici. OK ? Il crée d' abord la racine de React en utilisant React Dom, et il rend l'application ici. Vous pouvez voir l'application. D'accord ? Maintenant, qu'est-ce que l'application ? L'application n'est donc rien d'autre qu'App Dot Choir. Vous pouvez donc voir en haut de la liste des entrées, Importer l'application depuis point App. Maintenant, c'est quoi ça ? C'est l'app point chos. OK ? Nous avons donc ici un composant défini qui était prédéfini, nous ne l'avons pas défini. Il a été défini. Il était disponible par défaut pour nous. Et cela contient du code qui est affiché sur l'interface. OK ? Nous sommes donc en train de rendre ce composant ici. OK ? Et si vous venez ici, c'est ce que vous voyez dans l'interface utilisateur. Vous pouvez voir edit src slash app point Gs et enregistrer pour recharger. Tu peux voir. Donc, si vous souhaitez modifier l'interface, vous devez modifier l'application point js. Donc, tapez sur le point parce que c'est ce qui est rendu. Et selon les instructions, vous pouvez le modifier. Vous pouvez donc voir modifier les App Js et les enregistrer pour les recharger. C'est le message que vous voyez ici, et ce message vient d'ici. Hein ? Donc, quelles que soient les modifications que vous apportez ici, vous les verrez immédiatement. Alors réfléchissez-le. Je peux donc dire recharger et je peux dire mettre à jour ici, mettre à jour le clavier Et vous verrez ici 1 seconde. Je ne l'ai pas fait. OK. Mettre à jour. Vous pouvez voir que la mise à jour est ajoutée ici. Je fais donc la mise à jour en direct et je constate les changements. Si je sauvegarde à nouveau, si je vais ici, mise à jour est supprimée, n'est-ce pas ? Donc, toutes sortes de modifications que vous souhaitez apporter à l'interface, vous pouvez les apporter dans APD, d'accord ? Vous pouvez même ajouter d'autres composants, comme si nous n'étions en train de rendre qu' une seule application ici. Comme l'application, le composant défini à partir d'APD a. Vous pouvez voir que nous l'exportons ici. OK. Nous l'exportons donc ici, il est importé dans ce fichier et il est rendu ici. OK ? Toutes sortes de modifications que vous souhaitez apporter, vous pouvez les apporter ici. Et si vous souhaitez ajouter d'autres composants, nous pouvons le faire également, bien entendu. Vous l'apprendrez lorsque nous approfondirons un peu. Mais oui, j'espère que cela vous donne une idée claire de ce qui se passe, de la raison pour laquelle cela se produit. Et vous trouverez d'autres fichiers comme index point CSS. Vous pouvez voir dans les points de l'application que le CSS de l'application est utilisé. Ce sont donc tous des fichiers CSS, d'accord, qui existent et qui sont utilisés. Vous avez le logo point SVG. OK ? Il s'agit du fichier du logo. OK. Donc oui, il s'agit de la structure du projet. C'est assez simple et cela vous donne un aperçu de ce qui se passe une fois que votre application React est créée lorsque vous l'exécutez pour la première fois. C'est bon. J'espère donc que vous avez une idée claire de la façon dont cette interface est rendue, et j'espère que cela vous a été utile. 8. Notre premier projet React: Il est donc temps d' expérimenter un peu le projet que nous avons créé. Donc, ce que nous allons faire, c'est modifier un peu le discours pour imprimer un message personnalisé de notre choix, et le message que nous pouvons imprimer est le bienvenu sur React, et c'est ma première application React. C'est donc un message que nous allons imprimer. Si vous pensez pouvoir relever ce défi, d'accord, selon ce que nous avons compris jusqu'à présent, je serais heureuse que vous le fassiez. D'accord ? Alors mettez la vidéo en pause maintenant et lancez-vous dans le cadre d'un défi en remplaçant le contenu que vous voyez, et vous le remplacez par le message que je viens de dire, OK ? Pour remplacer les instructions qui sont également données ici, vous devez modifier ce fichier en particulier, arc slash app point CHS pour apporter des modifications accord ? Alors essayez ceci. Et si tu n'en es pas capable, ne t'inquiète pas, tu reviendras. Vous pouvez revenir regarder cette vidéo et regarder cette solution. J'espère donc que vous avez eu l'occasion de relever ce défi. Ce que je ferais, c'est commencer par ce point précis. Je vais me rendre sur SRC et sur app point Hs. D'accord ? Maintenant, app dot js est en cours de rendu. Ce composant d'application est donc rendu en index point chas D'accord ? Et c'est le composant principal en ce moment, d'accord ? Donc ce que je vais faire, c'est venir ici. OK. Je peux vraiment minimiser cela ici. Le serveur est en cours d'exécution. Alors voilà, je renvoie ce DIF. Je n'ai donc pas besoin de tout ça, donc je peux juste m'en débarrasser. D'accord ? Par ici. Ensuite, je peux avoir un message. D'accord ? Je peux donc dire « H one ». Je peux vous dire, bienvenue pour réagir, quelque chose comme ça. Et vous pouvez avoir un tag E P ici et vous pouvez dire que c'est bon, c'est ma première application React. Quelque chose comme ça, et tu peux l'enregistrer. Au moment où vous l'enregistrez, et si vous venez ici, vous verrez ce message apparaître. D'accord ? Maintenant, vous pouvez voir que c'est entièrement écran large parce que nous avons supprimé de nombreux éléments ici , n'est-ce pas ? C'est donc ce que tu dois faire. Une autre chose est, je vais le mentionner ici, que j'ai regroupé ces deux éléments, ou ces deux éléments HTML dans un TIF parent D'accord ? Donc , ce qui se passe ici, observez simplement qu'il s'agit d'une fonction, une fonction JavaScript normale, et j'utilise logo ici, ce qui, en fait, je ne sais pas. Je vais faire un petit nettoyage. OK. Maintenant, j'utilise app point CSS, ce fichier CSS. Il s'agit d'une fonction qui renvoie quelque chose. D'accord, il renvoie ceci, et j'exporte cette fonction particulière. Et cela est utilisé dans index, index point Qs. Vous pouvez le voir ici. Il est utilisé ici. Ce qui signifie qu'il est rendu ici, et qu'il est rendu dans root Def. D'accord ? Donc ce qui se passe, c'est que je vais renvoyer ça, OK, ce code ici. Ce bout de code ressemble à du HTML, d'accord ? Mais ce n'est en fait pas du HTML. C'est connu sous le nom de JSX, d'accord ? Donc, la syntaxe XML de Ja Script, comme vous pouvez le voir en HTML, si vous voulez écrire un nom de classe, vous aurez un attribut différent ici. Vous n'utiliserez pas le nom de la classe ici, d'accord ? Ainsi, au lieu du nom de la classe, vous allez écrire la classe en HTML. D'accord ? Mais dans Jx, vous utiliserez le nom de la classe. OK. Et la syntaxe est très similaire à celle du HTML. Donc, si vous connaissez le HTML, ce serait assez simple. OK. Et il y a une règle que vous devez connaître lorsqu'il s'agit de renvoyer l'interface. Donc, en fait, vous construisez une interface et vous la renvoyez depuis le composant. Ainsi, lorsque vous le renvoyez, vous devez vous assurer que tous les éléments de l'interface utilisateur sont regroupés sous un seul élément. Vous ne pouvez donc renvoyer qu' un seul élément et non plusieurs. Je vais te montrer ça. Donc, si je le supprime OK, vous pouvez voir que je commence à avoir une erreur. Vous pouvez voir que les expressions JSX doivent avoir un parent. Et si j'essaie de le sauvegarder et de me rendre ici, vous pouvez voir toutes sortes d'erreurs ici. Tu peux voir. Et il vous donne également le message d'erreur. OK, ça veut dire qu'il doit être enveloppé dans des balises enveloppantes et qu' il vous faut un fragment ici OK. C'est donc l' explication qu'il donne. Je vais juste faire Control S, et je vais ramener le TIF, et je vais l'enregistrer pour le remettre dans sa forme de travail d'origine. C'est bon. J'espère donc que c' est quelque chose que vous avez compris et j'espère que vous avez été en mesure de le faire. D'accord ? Vous pouvez même ajouter votre introduction ici. Du genre : « Salut, je suis », quel que soit ton nom, tu peux l'ajouter. Vous pouvez enregistrer le fichier et vous verrez le résultat sur la page Web. D'accord ? J'espère donc que vous avez pu me suivre, et j'espère que cela vous a été utile. 9. Introduction à Vite et à sa configuration: Je suis donc ici sur mon terminal, d'accord, et j'ai accédé à mon dossier dans lequel je crée les projets React Donc, si je dis LS, je vais voir qu'un projet React est déjà créé ici. OK ? Maintenant, ce que je veux faire ici, c'est parler du blé. Maintenant, qu'est-ce que manger ? WT est donc une autre façon de créer des projets React, et WT est en fait un outil de construction moderne qui offre une expérience de développement rapide et efficace pour les applications Web modernes, d'accord ? Et cela accélère le temps de développement pour les développeurs, en traitant les fichiers uniquement lorsqu' ils sont réellement importés, et c'est beaucoup plus rapide. Il dispose également d'un serveur de développement beaucoup plus rapide, d'accord ? Donc, aujourd'hui, si vous développez React, le blé est beaucoup utilisé. OK ? Et si vous allez dans le navigateur, si vous recherchez du blé ici comme ça, d' accord, vous verrez que c'est un serveur de développement local. OK ? C'est un outillage frontal Et si vous allez sur le site Web ici, vous verrez qu'il s'agit d'un Biltol pour le Web OK, et c'est un outil de création frontal incroyablement rapide qui alimente prochaine génération d' applications Web, d'accord ? Et tu peux y aller. Vous pouvez voir le serveur démarrer instantanément à la vitesse de l'éclair, HMR. Il supporte beaucoup de choses : script , dactylographie. OK. Et oui, vous pouvez consulter le site Web et en savoir plus sur ce qu' il vous permet de faire. C'est bon. De plus, pour en savoir plus, vous pouvez cliquer sur Commencer ici. OK. Et vous pouvez en savoir plus sur le blé. Tu peux voir comment ça se prononce. Cela se prononce Wheat Okay. Et vous pouvez voir, sont les modèles qu'il supporte, d' accord, Vanilla Juice Vanilla TypeScript, view it supporte Tout cela, il le soutient. D'accord ? Donc, si vous faites défiler la page un peu vers le bas, vous verrez également les commandes utilisant NPM, yarn, PNPM et B. Mais nous utilisons NPN, nous pouvons donc utiliser cette Je vais donc vous montrer comment créer un projet à l'aide de VT. OK. Vous pouvez même créer un projet à l'aide de l'application Create React, mais je dirais que c'est une façon plus moderne de créer des projets React et de travailler sur le développement Web. accord ? C'est ce que tout le monde fait ces temps-ci. D'accord, vous devez donc savoir ce qu' est l'informatique et comment vous pouvez l'utiliser. Vous pouvez donc voir cette commande NPM create Wet latest. OK ? Je peux donc le copier. OK ? Il existe une autre version. De cette commande en particulier. Ainsi, une fois que vous avez exécuté la commande, elle vous demandera quel type de projet vous souhaitez créer. Quel est le nom du projet ? Je vais vous indiquer le modèle que vous souhaitez utiliser. OK. Donc, tout cela vous sera demandé et vous pourrez sélectionner les options. Mais si vous souhaitez spécifier les options auparavant avec cette commande elle-même, sans passer par l'invite. Vous pouvez donc directement dire « NTM create Wet latest », spécifier le nom du projet et également spécifier le modèle Il a donc spécifié que le modèle est view. Vous pouvez spécifier le modèle comme React si vous travaillez sur React ici. OK. Ou si vous travaillez sur React avec le support TypeScript, vous pouvez dire React Hyphen En fonction de ce que vous souhaitez faire ou du type de projet que vous créez, vous pouvez spécifier le modèle. OK. Mais je vais poursuivre avec cette approche. OK. Je vais vous montrer toutes les options qu'il nous propose. OK ? Maintenant, assurez-vous que vous êtes dans le dossier, qui n'est pas une application React. OK ? Je suis donc ici dans ce dossier où je crée toutes les applications React, n'est-ce pas ? C'est donc une application React que j'ai. Maintenant, je vais exécuter cette commande. OK ? Oups, pas celui-ci OK ? Celui que j'ai copié, ça devrait être celui-ci non plus. OK. Je vais le coller ici. NPM crée donc Wheat au plus tard. Au moment où vous appuyez sur Entrée, il vous dira que, Hey, il doit installer les packages suivants. OK pour continuer ? Je vais dire oui. OK. Et il installera tous les packages, et il me demande quel devrait être le nom de mon projet. OK ? Je peux donc saisir le nom de mon projet. Je peux entrer. Je peux dire réagir ou 1 seconde. J'ai donc mon onglet React, non ? Je peux donc voir ma réaction ou ce ne devrait pas être mon robinet de réaction, donc je peux dire quelle réaction, quelque chose comme ça. OK ? Et je vais juste appuyer sur Entrée, et vous pouvez voir qu'il me demande le cadre. Quel cadre je souhaite donc choisir ici ? OK ? Voulez-vous de la vanille, vous voulez utiliser React. Donc, puisque nous utilisons React, je vais sélectionner React ici. Il me demande si je veux le support TypeScript ou quelque chose comme ça Je vais donc simplement sélectionner JavaScript ici. OK. Et oui, c'est terminé, vous pouvez voir à quel point c' était rapide. OK ? Tu peux voir. Il n'est pas nécessaire d'installer les packages suivants. OK, désolé, je dois installer les packages suivants. Et il m'a posé quelques questions auxquelles j'avais répondu. Vous pouvez également ignorer cette invite, comme je l'ai dit, en l'ajoutant dans la commande. Vous pouvez spécifier le nom du projet, et vous pouvez spécifier des éléments tels que le modèle et tout ici. OK ? C'est également faisable. D'accord ? Mais j'ai choisi la voie interactive, puis cela a créé ce projet ici, d'accord ? Et il vous dit de faire un CD, de quoi réagir. Et faites l'installation de NPM, et vous pouvez faire en sorte que NPM exécute Tf Laissons donc exécuter ces commandes, et voyons ce qui se passe. Je vais aller sur CD chez React. Je vais dire NPM install, qui installera toutes les dépendances dont mon projet a besoin, et je copierai ce NPM run Def ici. D'accord, oui, il installe tout. Cela prendra quelques secondes. C'est fait en 10 secondes, et je dirais NPM run def Et maintenant, vous pouvez voir qu'il a démarré le serveur sur l'hôte local 5173 Il s'agit donc d'un port par défaut ici. OK, c'est utilisé pour gérer ces projets, d'accord ? Et si vous passez à ça, d'accord, laissez-moi réinitialiser pour que vous puissiez voir que j'ai beaucoup zoomé OK ? Vous pouvez donc voir qu' il s'agit de la page par défaut. Donc, il est écrit Wt plus react, et vous pouvez voir qu'il y a un compteur sur lequel vous pouvez cliquer pour augmenter le nombre. OK ? Et vous avez app point Jx, que vous pouvez explorer et modifier essentiellement pour mettre à jour cette interface utilisateur particulière ici OK ? Et vous pouvez cliquer sur les logos IT et React pour en savoir plus. Donc, si vous cliquez sur React, vous serez redirigé vers la page React. Si vous cliquez sur le logo Wet, vous serez redirigé vers la page Wet. C'est bon. J'espère donc que vous avez pu suivre un et j'espère que cela vous a été utile. 10. Passer à Visual Studio Code et changer de port: Maintenant, ce que je vais faire, c'est que cette application Heat est en cours d'exécution, mais je l'exécute en fait depuis mon terminal natif. Donc, ce que je ferais, c'est passer à Visual Studio Code et ouvrir le projet Heat dans code Visual Studio pour que je puisse y travailler. Je vais donc passer à File. Je dirais dossier ouvert, d'accord. Et ici, je vais sélectionner eat react. OK ? Donc, Wheat React est le nom de mon projet, n'est-ce pas ? Je vais également ouvrir le terminal. Ici. OK. Maintenant, je peux exécuter le serveur à partir d'ici. Je peux donc exécuter le serveur, en fait, mais ici vous remarquerez qu' un serveur fonctionne sur le port 5173 OK. Je vais donc simplement arrêter ce serveur. OK ? Nous avons donc défini NPM run deep et il fonctionne sur 5173, qui est le port par défaut pour les projets relatifs au blé Maintenant, disons que je souhaite personnaliser ce port pour Loose 3,000. OK ? Donc, ce que je peux faire, c'est venir ici. Euh, vous pouvez voir la structure du projet. OK ? C'est presque similaire à l'application React ici. Tu peux voir. OK ? Ce que WeatJS C'est le fichier de configuration que nous avons. OK. Donc, ce que je vais faire, c'est entrer dans cette configuration. OK. Cela me permet de faire une configuration personnalisée pour Wheat. Je vais l'ouvrir et ici, vous pouvez le voir. OK, voici la configuration. J'ai donc des plugins pour React. Maintenant, en dessous, je vais dire serveur. OK, et je vais dire deux points. Je vais ajouter un compliment ouvert et fermé . Je vais ajouter une virgule Je vais terminer par une virgule. Et ici, je vais dire port, Colin, je vais dire 3 000 et je vais terminer par une virgule OK ? C'est fait. Je vais enregistrer ce fichier ici, et nous pouvons dire NPM, run deaf now OK ? Si vous le faites, vous verrez que le serveur est opérationnel sur l'hôte local 3 000. Oups, j'ai accidentellement arrêté le serveur, mais il fonctionne sur 3 000 Maintenant, si vous actualisez 5173, vous ne trouverez rien ici Ici, sur 3 000, si vous actualisez cette page, il s'agit de notre ancienne application que nous avons créée. Vous verrez t plus react courir ici. OK ? Donc oui, tu as un compteur. Vous pouvez voir que tout est pareil. OK. Voici donc comment vous pouvez changer le port en ajoutant une configuration simple dans et config chas et vous pouvez le faire comme je vous l'ai montré OK ? Maintenant, vous verrez ici tous les dossiers et tout ce qui a été créé, qui sont similaires, je dois dire, à celui que nous avons vu dans le projet que nous avons généré à l' aide de l'application Create React. Vous verrez le point moyen principal SX. OK ? Ainsi, dans le fichier React ou dans le projet précédent que nous avions, si vous créez un projet à l'aide de l'application Create React, vous verrez que ce sera Mean point js et non JSX Ici, vous avez app point jsx et non app point Gs. OK ? Donc ici, tout est défini dans l'extension GSX Et la raison en est qu'il contient du code JSX. OK ? Donc le code que vous voyez ici n'est pas du HTML. OK, permettez-moi de minimiser cela. Ce n'est donc pas du HTML. En fait, il s'agit en fait du code JSX. D'accord, ce qui est similaire au HTML. Presque pareil, je dirais que si vous connaissez le HTML, vous pouvez réellement lire ce code. Mais il existe de petites différences, comme le nom de la classe. C'est ainsi que vous définissez les classes. Donc, en HTML, vous aurez une classe comme celle-ci, est-ce pas, avec cette balise de classe. Mais voilà, tu as le nom de la classe, d'accord ? Et vous pouvez voir que le reste, tout ressemble au HTML. OK ? Donc c'est le JavaScript XML, JSX, d'accord ? Et vous trouverez les noms de fichiers sous la forme jsx point JSX ici. OK ? C'est donc quelque chose que tu dois savoir, non ? Et dans n'importe quel RRS, tout est similaire. Index ou TML, vous avez l'extérieur du dossier public ici Tu peux voir. Vous avez le package point JCN qui est utilisé pour empaqueter ou non, je dois dire qu'il est essentiellement utilisé pour gérer les dépendances de votre projet ici Et toutes les dépendances que vous ajouterez seront incluses dans des modules de nœuds, auxquels nous ne toucherons pas. Votre dossier public, qui contient un fichier SVG. OK ? C'est donc une structure similaire, presque identique, je dirais. Et vous avez compris que si vous comprenez le projet créé à l'aide de l'outil d'application Create React, vous le comprendrez également. C'est bon. Donc oui, j'espère que cela vous sera utile et j'espère que vous avez pu suivre. 11. Introduction à la syntaxe et aux règles JSX: Il est donc temps de commencer à parler de JSX. Maintenant, qu'est-ce que JSX ? J'ai donc ajouté quelques commentaires dans cette application ou dans ce fichier JSX. C'est bon. Vous pouvez donc voir ici que JSX est une extension de syntaxe pour JavaScript qui ressemble à du HTML OK ? Et avec l'aide de JSX, vous êtes autorisé à écrire HTML comme du code dans JavaScript Pouvez-vous donc écrire du code HTML dans JavaScript ? Non, mais avec l'aide de JSX, vous pouvez écrire, et cette réaction transforme cela en objets JavaScript. OK. C'est donc ce qu'est GSSix, et c'est pourquoi il est utilisé, n'est-ce pas Nous allons donc regarder quelques exemples ici, d'accord ? Vous pouvez voir qu'il y a déjà du code écrit dans Gasix lorsque nous avons créé le projet, et c'est ce qui est rendu, d' accord, avec l'aide de cela OK ? Mais nous allons le clarifier et nous allons passer à des exemples beaucoup plus simples. OK. Mais une chose à retenir est que c'est ce dont vous devez vous souvenir. Cela ressemble à du HTML, mais ce n'est pas du HTML. OK, si vous connaissez le HTML, vous pouvez facilement comprendre, lire et écrire, désolé, pas Ja Script, GSX, et cela vous permet essentiellement de vous aider à créer des composants React, et vous pouvez voir à quoi ressemblera votre interface utilisateur directement dans votre code parce que c'est du HTML. OK ? Donc, ce que je vais faire, c'est que vous pouvez voir ici qu'il y a quelques variables et que tout est créé, donc je vais juste me débarrasser de tout cela, de tout cela. OK. Je vais juste me débarrasser de tout ça. OK. Et je vais enregistrer ça. Il n'y a donc littéralement rien sur la page maintenant. OK. Il est totalement vide, comme vous pouvez le voir. OK. Je vais également me débarrasser de ces importations, d'accord ? Je vais juste garder le fichier CSS. Si vous accédez au fichier CSS. D'accord, c'est un CSS assez décent, non ? Donc, quelque chose a été écrit là-bas. OK. Je vais donc m' en tenir à ce dossier. Nous ne toucherons pas encore au CSS, n'est-ce pas ? Mais nous allons commencer à écrire six codes. OK ? Donc, ce que je ferais, c'est que je peux le dire ici, dans le cadre de tout cela. OK ? Donc ici, disons que c'est le DIF. OK, donc je vais avoir un élément TF. Ou c'était un tag vide. Je peux dire ici qu'il est allé, non. Et je peux dire comment je peux dire « world  », quelque chose comme ça. Et vous verrez Hello World être imprimé ici en tant que sortie. OK ? Maintenant, c'est du JavaScript. Ce truc est entièrement en JavaScript, non ? Et dans JavaScript, vous êtes autorisé à écrire du HTML comme du code, et cela ressemble à du HTML, mais en fait c'est du JSX OK ? Vous pouvez même ignorer ces balises Div si vous le souhaitez. Je vais expliquer l'importance d'avoir un DIV, comme tout ce qui est enveloppé dans un TIF. Mais vous pouvez voir que cela fonctionne également très bien. OK ? Maintenant, ce que tu peux même faire, c'est t'occuper de ça ici, d'accord ? Je peux dire const ligment ici, et je peux assigner cela ici, quelque chose comme ça OK. Et donc ici, vous pouvez simplement dire, d'accord, lamenter entre deux ou en retour OK ? Maintenant, si vous sauvegardez ceci et si vous venez, d'accord, vous ne verrez aucune sortie. La raison pour laquelle vous ne voyez aucune sortie est qu'elle doit être encapsulée dans un TIF, d'accord ? Je vais donc le couper et le coller ici. OK ? Quelque chose comme ça. OK. Et je vais enregistrer ça. Et si vous venez ici, vous verrez Hello World en sortie. OK ? Donc oui, c'est une autre façon de rendre la même chose. Vous pouvez même le couper et le coller ici comme nous l'avons fait au début. OK ? Mais oui, il y a certaines règles lorsque vous utilisez GSX, il y a certaines règles dont je voudrais parler. C'est bon. Maintenant, la première règle concerne les éléments GSX. Vous renvoyez donc des éléments JSX ici dans le cadre de la déclaration de retour OK ? Alors jetez un œil à la structure de ce code, d'accord ? Vous avez cette fonction. Cela renvoie les éléments JSX, tout ce que vous renvoyez ici est rendu sur l' interface, n'est-ce pas ? Donc, si vous ne renvoyez rien d'ici, si je ne renvoie pas d'élément, il ne sera pas affiché sur l'interface, vous pouvez le voir, n'est-ce pas ? Si je sauvegarde le fichier, il ne s'affiche pas. Si je sauvegarde à nouveau le fichier, il s'affichera. Donc, tout ce que vous retournez ici est rendu sur l'interface, et c'est ce que vous exportez ici. Et la raison pour laquelle il est rendu est que dans le point principal Jx, vous effectuez le rendu de l'application ici en tant que partie de l'élément racine Et ce qu' est l'application qui vient d'ici, c'est ce composant. OK. Ainsi, quel que soit le rendu, les éléments que vous renvoyez ici dans le cadre de l'instruction return doivent être encapsulés dans un seul élément parent. OK ? Permettez-moi donc de mieux expliquer cela. OK ? Donc ce que je vais faire, c'est juste commenter ça pendant un moment, d'accord ? Et je vais inviter tout le monde ici, d'accord ? Directement plutôt que d'avoir cet élément. OK ? Disons que j' ai Hello World Simple. OK ? Maintenant, sans cet élément parent, je peux avoir Hello World. Il n'y a aucun problème en tant que tel. Tu peux voir. Si je l'ai, ça marchera bien. OK ? Mais au moment où j'ajoute un autre élément ici, disons que je dis haut ici. OK. Tout d'abord, vous voyez que j'ai une erreur. OK, vous pouvez donc voir que les expressions JSix doivent avoir un élément parent Et si je viens ici, vous pouvez voir l'erreur ici. Vous pouvez voir qu'il doit être enveloppé dans une étiquette de fermeture et vous pouvez voir que cela ne fonctionne pas, n'est-ce pas ? Il doit donc y avoir un élément parent. Et si vous avez plusieurs éléments renvoyés, plusieurs éléments J six, vous pouvez les encapsuler plusieurs éléments J six, vous pouvez les encapsuler dans un seul élément parent, l'erreur disparaîtra et vous verrez le résultat ici. Donc, vous voyez « Bonjour tout le monde », puis vous voyez « haut », ce qui est écrit dans le tag P. C'est bon. J'espère donc que cela a du sens. C'est la règle numéro un, d'accord ? Les éléments JSX doivent être encapsulés dans un seul élément parent. Vous travaillerez beaucoup avec JSX si vous développez React et si vous vous souvenez de cette règle, car les gens se demandent toujours React et si vous vous souvenez de cette règle, car les gens se demandent toujours pourquoi vous devez tout regrouper dans une seule astuce et tout ça OK ? C'est donc l'une des règles. OK ? Une autre règle est en HTML, vous utilisez la classe, n'est-ce pas, pour attribuer un nom de classe à un élément particulier, n'est-ce pas ? Mais avec JSX, vous devez utiliser le nom de classe. Et pas de cours. Le nom de classe est donc utilisé à la place de class, et class n'est pas utilisée car class est, bien sûr, un mot de réserve dans Ja Script. D'accord, nous utilisons donc le nom de la classe ici. OK ? C'est donc quelque chose que vous devez garder à l'esprit. Donc, si vous souhaitez ajouter des noms de classe afin qu'ils puissent être correctement stylisés, vous devez utiliser le nom de classe OK ? Et souvenez-vous de la syntaxe ici. Oups. Souvenez-vous donc de la syntaxe, il faut que ce soit le nom de la classe. Donc N, tu peux voir l'affaire Camel en action ici, d'accord ? C'est donc une autre règle, puis il y a une règle concernant les balises à fermeture automatique. OK ? Maintenant, il y aura des tags qui n'auront besoin d'aucun type d'enfant, par exemple, un tag image. OK, ils doivent donc être fermés automatiquement. OK ? Par exemple, j'ai besoin de cerceaux Je peux donc dire que je dois utiliser une image comme celle-ci. Je peux ajouter SRC et partout ici. OK ? Mais l'étiquette doit être une étiquette à fermeture automatique. Il se ferme tout seul, non ? C'est donc quelque chose que vous devez garder à l'esprit. OK. Voici donc certaines des règles concernant GSX, d'accord. Mais n'oubliez pas que le point clé de cette vidéo en particulier est que JSX n'est pas du HTML D'accord, cela semble très, très similaire, mais ce n'est pas du TML. Vous pouvez également utiliser JavaScript dans JSX en l'intégrant dans des accolades. OK, par ici, quelque chose comme ça. Vous pouvez dire sept plus six plus sept, quelque chose comme ça, ici, et vous verrez 13 en sortie A. Vous pouvez donc intégrer du code JavaScript dans une seule paire d'urbass C'est quelque chose qui peut être fait. OK ? Et les éléments JSX doivent être encapsulés dans un seul élément parent comme DV ici OK ? Donc oui, il s'agit de J six, introduction à JSix J'espère que c'est clair, et j'espère que cela s'avérera utile. 12. Expressions et attributs avec JSX: Commençons donc par parler d' expressions et d' attributs avec Jax J'ai donc quelques commentaires ici. D'accord, vous pouvez donc voir le premier. Le premier point indique que vous pouvez intégrer n'importe quelle expression JavaScript valide dans le curly prese de JA six, d' Et les attributs JSix utilisent la syntaxe Camel case. Ce sont donc les deux points que nous allons aborder. OK ? Maintenant, ce que je vais faire, c'est faire un peu de ménage ici Je vais juste avoir une seule discussion ici. OK. Donc, premier point C, vous pouvez avoir ou intégrer n'importe quelle expression JavaScript valide dans Curly Pres, Et c'est dans JSX. Maintenant, ce que cela signifie, c'est si je veux imprimer une édition de deux nombres, d'accord, dix plus deux, je peux absolument le faire parce que c'est une expression Java valide, d'accord ? C'est tout à fait autorisé. Maintenant, au lieu de simplement imprimer le total ici, je peux avoir une étiquette H, quelque chose comme ça. OK, 1 seconde. Je vais donc prendre chacune d'elles. Je vais te dire bonjour. OK, et je vais avoir un nom ici, quelque chose comme ça. OK. Et ici, je peux dire const, nom, et je peux dire ALS, quelque chose comme ça OK. Donc, comme vous pouvez le voir, nous saluons Alice, d'accord ? Et ici, nous avons créé une variable de script JA ou une constante JA, je peux dire, appelée name. Et puis je l'utilise dans la syntaxe JSX. OK ? Maintenant, c'est une expression qui est en cours d'évaluation, d'accord ? Le résultat sera donc Hello Alice, et c'est ce que nous considérons comme le résultat. OK ? Maintenant, une chose que je voudrais mentionner ici c'est que j'ai mentionné à quelques reprises que G six n'est pas du HTML. OK. La question est alors de savoir comment est-il affiché sur le navigateur ? Il est donc converti en HTML par React, et il est affiché sur le navigateur. C'est ainsi que fonctionne le rendu pour JSX. Maintenant, il s'agit d'expressions. OK. Prenons un exemple de J six attributs. OK ? Maintenant, chaque fois que vous utilisez des éléments, il est bien sûr évident que vous utiliserez également des attributs, n'est-ce pas ? Par exemple, un tel attribut est ici, un tel attribut serait le nom de classe, d'accord ? Ou si vous souhaitez attribuer une balise H à une classe, vous devez ajouter le nom de la classe ici. Voici comment vous allez attribuer une classe à un élément dans JSX, d'accord ? Et vous pouvez appeler ça un message d'accueil ici. OK. Maintenant, souvenez-vous que c' est un étui à chameaux, d'accord ? Et vous ne pouvez pas avoir de cours ici, accord, parce que c' est du HTML, n'est-ce pas ? Et voici JSX. D'accord. Alors garde ça à l'esprit, d'accord ? Vous pouvez même avoir une connexion en ligne. Vous pouvez même utiliser des attributs qui vous permettent d'utiliser le style intégré OK ? Permettez-moi également de vous donner un exemple à ce sujet. OK ? Disons que je souhaite avoir un bouton ici, d'accord ? Et je dirais, cliquez sur M, quelque chose comme ça ici. OK. Et disons que je souhaite avoir du style ici. OK, donc je vais dire style. OK. Et j'ajouterai des poires frisées deux fois et je verrai. Donc, sans style, voyons comment ce bouton entre en jeu. Donc ça se passe de cette façon. Tu peux voir, clique sur moi. OK. Et ici, je peux maintenant voir la couleur de fond. OK. Couleur de fond. Vous pouvez le voir ici et je vais attribuer, disons, du vert. OK. Vous pouvez attribuer la couleur de votre choix. OK. Et je ferai en sorte que la couleur soit celle du blanc. Ou ici. Quelque chose comme ça. OK. Je vais enregistrer ça. Et si je viens ici, tu peux voir, clique sur moi. OK. Vous pouvez voir comment cela a été rendu. OK. Permettez-moi de déplacer ces deux lignes distinctes afin qu'elles soient visibles pour tout le monde. OK. C'est bon. Donc tu peux voir. J'utilise des styles intégrés ici au lieu d' un style externe OK ? Et je peux même le supprimer , me débarrasser de ce texte. OK ? Je peux l'ajouter sous forme d'expression. Je peux donc dire bouton const, label, quelque chose comme ça, et je peux cliquer sur M ici dans des codes uniques sous forme de chaîne Vous pouvez également utiliser des codes doubles. Ce serait mieux. OK. Et ici, vous pouvez avoir l'étiquette assignée en tant qu'expression, et vous verrez le même résultat. Tu peux voir. OK ? Voici comment vous pouvez utiliser les attributs, d'accord ? Vous pouvez même avoir un autre bouton. OK, alors laisse-moi trouver un bouton, oups. Je vais copier ce bouton. Je vais l'ajouter ici. OK. Et ici, tu peux dire « alerte-moi », ou bien voici le texte. OK. Et ici, tu peux le dire. Donc, ici, ce que je fais maintenant, c'est que je souhaite attribuer un événement au clic. OK ? J'ai donc créé un bouton. Vous pouvez voir une alerte pour moi. OK. Mais disons que je souhaite organiser un événement OnClick ici OK ? Maintenant, un clic en HTML, c'est un clic comme ça, non ? Mais dans J six, comme je l'ai dit, il suit la syntaxe de Camel Kaye, non ? Donc C sera majuscule ici. Gardez cela à l'esprit. OK, C sera majuscule ici, puis dans la paire de bretelles bouclées, vous pouvez créer ce genre de fonction ici, et vous aurez une alerte, et je peux dire « backticks », «   clic », quelque chose OK ? Si je sauvegarde ceci, voyons comment cela fonctionne. OK. Vous pouvez voir le bouton cliqué Cela fonctionne parfaitement bien. OK ? Ce sont donc de petites choses à propos de JA six que les gens se posent toujours des questions. Donc, si vous êtes débutant, si vous sautez cette étape, si vous passez directement à React Code, et si vous voyez un code écrit comme ça, vous vous demanderez tout d'abord pourquoi il s'agit de majuscules. OK ? Vous devez donc comprendre que c'est ainsi qu'il est utilisé dans JA six. OK ? Souvenez-vous donc de ces deux choses : vous pouvez intégrer n'importe quelle expression Jascript valide un Curly breeze dans du code JSix, et les attributs JSix utilisent la syntaxe des touches Camel, et les attributs JSix utilisent la syntaxe des touches Camel J'espère donc que vous avez pu suivre Je vais vous donner un dernier exemple ici d' affichage d'une image. OK. Donc, ce que je vais faire, c'est utiliser le tag IMG ici. OK. Et nous allons afficher une image. Nous allons dire SRC ici. OK. Et ce que je vais faire, c'est que nous avons besoin d'une image ici, donc je vais dire, s'il vous plaît, maintenez l' image, quelque chose comme ça. OK. Et je vais aller sur ce site Web et nous obtiendrons l' image fictive de 600 x 400 Il s'agit donc d'un site Web qui vous donnera n'importe quelle sorte d'image de remplacement OK. Je vais donc dire SRC, c'est la partie image Et si je sauvegarde ceci et si je viens ici pour voir le résultat, vous pouvez le voir. OK. D'accord, 600 x 400, c'est super énorme. Je vais donc simplement le remplacer par cent par 100. Si cela vient ici, vous pouvez voir une image 100 x 100. Et cela peut même être converti en expression. Donc je peux couper ça. OK, je peux y aller. Je peux dire consimage URL, quelque chose comme ça. Je peux l'ajouter ici, et je peux venir ici et je peux avoir le chemin de l'image ici, l'URL de l'image. Comme ça. OK ? Je peux même ajouter un espace réservé. Je peux voir Alt et c' est une image dynamique. Comme ça. OK. Tu peux voir. La sortie n'a pas changé, d'accord ? Cela fonctionne parfaitement bien. D'accord, voici comment vous pouvez travailler avec l'image. Vous pouvez même déplacer cette déclaration ici, voyons voir. OK. Oups, tu ne peux pas. Tu ne peux pas. Compte tenu de ça, il faut que ce soit en haut, d'accord ? Juste avant le retour, d'accord ? Cela ne peut pas faire partie d'un écrit. J'en suis désolée. OK. Donc oui, c'est J six, et j'espère que c'est assez clair pour vous et j'espère que vous l'avez trouvé utile. 13. Rendu conditionnel: Très bien, parlons maintenant du rendu conditionnel et de la réaction. Désormais, le rendu conditionnel est utilisé lorsque vous souhaitez afficher différents éléments de l'interface utilisateur fonction de certaines conditions, et dans React, vous pouvez utiliser le rendu conditionnel de plusieurs manières. Il existe donc plusieurs manières d' implémenter le rendu conditionnel. D'accord ? La première méthode consiste à utiliser les instructions IL. Maintenant, si vous connaissez JavaScript, vous devez connaître l'instruction FL. Vous pouvez donc utiliser l'instruction FFL pour effectuer un rendu conditionnel Vous pouvez également utiliser l'opérateur ternaire, et vous pouvez également utiliser l'opérateur Laissez-moi vous montrer comment cela fonctionne. Donc, ici, j'ai cette fonction qui renvoie un TIF vide. Il ne renvoie encore rien. Et si vous venez ici, vous ne verrez aucune sorte de résultat. Maintenant, disons, si je souhaite vérifier si un utilisateur est verrouillé ou non. Et selon que l'utilisateur est verrouillé ou non, je souhaite afficher un message, n'est-ce pas ? Donc, ce que je peux faire, c'est avoir une variable ici. Je peux dire que c'est enfermé, non , et je peux dire que c'est vrai. D'accord ? L'utilisateur est donc verrouillé. Je peux dire que c'est enfermé. D'accord. Dans ce cas, vous pouvez faire ce que vous pouvez faire , cela ne viendra pas ici. D'accord. Il va donc falloir que je l'ajoute ici. D'accord. Donc, si l' utilisateur est verrouillé, vous pouvez revenir. D'accord ? Je vais donc supprimer ce retour ici. Je peux rentrer, et je peux les voir tous ici. D'accord ? Bon retour. Quelque chose comme ça. Je n'ai pas besoin de ce retour ici. D'accord. C'est donc ce qui deviendra mon retour, d'accord ? Et s'il n'est pas enfermé, d'accord, alors je peux dire « retour », et je peux dire « H un » et je peux dire, veuillez vous connecter. Par exemple, et je vais enregistrer ceci. D'accord. Vous pouvez donc voir ici, bon retour. Et si je remplace le drapeau par faux et que je sauvegarde, vous verrez, veuillez vous connecter. Donc, en fonction de la condition, cette variable contrôle la condition. En fonction de cette variable, attribuez une valeur à la valeur qu'elle contient, qu'elle soit vraie ou fausse, vous affichez en fait différents messages sur l'interface. D'accord ? Et c'est ainsi que fonctionne le rendu conditionnel. Vous pouvez voir si nous utilisons deux relevés de compte , ce qui est tout à fait normal. J'ai même oublié les crochets. D'accord. Ces crochets sont donc ignorés Vous pouvez l'ajouter si vous le souhaitez, mais je voulais juste y voir plus clair. D'accord ? Quelque chose comme ça. C'est tout à fait normal. D'accord. Je vais juste me débarrasser de ces crochets. Voici donc comment fonctionne le rendu conditionnel en utilisant l'instruction if. D'accord. J'espère que cela a du sens. Maintenant, vous pouvez également convertir le tout en utilisant un opérateur Turnaire D'accord ? Donc, ce que je ferais, c'est simplement ajouter le commentaire ici. D'accord. Je vais simplement le convertir en commentaire. Et maintenant, je vais utiliser l'opérateur Tonery. D'accord ? Donc, ce que je peux faire, c'est dire « const » ici D'accord, je peux dire « aliment ». D'accord. Et je peux voir chacune d'elles. D'accord. Maintenant, si c'est le cas, je vais avoir ceci comme expression. D'accord. Maintenant, l'expression dit que s'il est enfermé, d'accord, alors je serai le bienvenu. À l'arrière. OK, quelque chose comme ça , sinon je vais dire : quel est le message ? Merci de vous connecter. Donc je vais l'avoir ici. D'accord. Maintenant, ce que je peux faire, c'est renvoyer T, donc je peux dire retour ici, et je peux simplement renvoyer H ou je peux simplement renvoyer l'élément ici, quelque chose comme ça. Et je peux le sauver. D'accord. Oups, donc ça ne marchera pas. Je dois l'envelopper dans un TIF. D'accord. Cela devrait donc vous donner le résultat. OK, vous pouvez voir, veuillez vous connecter, et si je change cela en vrai, ici. Oups. C'est vrai ici. Dans ce cas, vous verrez Welcome back. D'accord ? Nous utilisons donc un opérateur ternaire, d'accord ? Je vais l'étendre à de nouvelles lignes afin que tout le monde puisse le voir. Vous pouvez voir comment cela est utilisé, d'accord ? L'élément constant est égal à H une fois connecté. D'accord ? Nous utilisons donc cette expression qui est verrouillée dans Bienvenue, veuillez vous connecter, et je ferme le tag H one. Et sur cette base, nous renvoyons cet élément ici. D'accord, nous utilisons donc ici un opérateur ternaire, essentiellement, pour faire du rendu conditionnel, c'est ce que je dirais D'accord ? Donc j'espère que c' est logique, d'accord ? Permettez-moi de vous donner un autre exemple. Maintenant, cet exemple est un rendu conditionnel à l'aide de l'opérateur and. OK, maintenant qu'est-ce que l'opérateur ? En utilisant et deux fois ? D'accord, vous pouvez donc également l'utiliser, essentiellement pour afficher un élément uniquement lorsqu'une condition est vraie. Hein ? Maintenant, permettez-moi de vous donner un exemple pour cela également. D'accord ? Disons donc ce que je peux faire est écrit juste au-dessus, je peux avoir des messages constants Disons que je tiens jour une liste de messages, d'accord ? Disons que c'est une application de chat. Maintenant, s'il y a un nombre quelconque de centaines de messages. OK, donc ce sont 100 messages, disons, d'accord ? Il y a une série de centaines de messages. Maintenant, s'il y a cent messages, je souhaite montrer une notification à l'utilisateur disant : « Hé, tu as X cents messages ici. D'accord ? Comment pourrais-je m'y prendre ? Donc, ici, je dirais simplement que les messages ont la longueur des points. Si la longueur des points des messages est supérieure à zéro. OK, et je vais faire opérer ici. Je vais dire H deux, quelque chose comme ça. D'accord. Et je dirais que les messages doivent être longs en points. D'accord. Des centaines de messages, quelque chose comme ça. D'accord ? Si je l'enregistre, vous verrez que rien n'est affiché. D'accord, parce que la longueur des messages est nulle. Maintenant, si j'y ajoute un message. OK, tu peux voir que tu as 100 messages. Si j'ajoute un autre message, d'accord ? N'importe quel message, d'accord, nous ne faisons que regarder le décompte. Vous pouvez voir que vous avez 200 messages. D'accord ? Comment est-ce que cela fonctionne ? Cela prend donc en compte cette longueur de tableau et vérifie si la longueur du tableau est supérieure à zéro. Maintenant, laissez-moi vous expliquer comment fonctionne cette ligne et comment elle nous transmet le message de manière conditionnelle, d'accord ? Nous utilisons donc la logique et ici. Et si vous connaissez JavaScript, vous devez connaître l'opérateur logique. Ainsi, lorsque et est utilisé, le côté gauche est évalué en premier. Voici donc l'expression sur le côté gauche. La longueur du message est supérieure à zéro. D'accord. Il évalue donc cela et si cette expression est vraie, il évalue et renvoie le côté droit D'accord ? Si cela est vrai, il évalue et renvoie le côté droit. Et si c'est faux, le côté gauche est faux, il ne renvoie pas le côté droit, et cela court-circuite essentiellement. Et c'est ce qu'on appelle le court-circuit, d'accord ? Là où il n'évalue pas le côté droit, et en gros, il ne donne rien ici D'accord ? Donc oui, c'est comme ça que ça marche ici, d'accord ? Et cela est utilisé pour effectuer un rendu conditionnel. Et vous verrez souvent ce genre d'expressions, d'accord ? Donc, si vous avez une condition ici et que vous allez utiliser et ensuite ce que vous voulez afficher sur le côté droit. D'accord ? C'est ainsi que ce court-circuit est utilisé ici pour afficher des messages conditionnels Et je dirais que c'est beaucoup plus concis que écrire une déclaration FL et des opérateurs ternaires, à mon avis D'accord ? Vous pouvez donc également convertir toute cette expression, euh, en quelque chose de ce genre, d'accord ? Mais l'opérateur ternaire est en fait utile si vous souhaitez également avoir un message d' échec OK, donc tu as deux messages. Bienvenue, et veuillez vous connecter, d'accord ? Donc, vous n'avez qu'un seul message, d'accord ? Mais ici, vous avez deux messages qui sont affichés alors que quelque chose est vrai. Donc en fait, ils ne sont pas tous les deux identiques, d'accord ? Mais oui, si vous n' affichez qu'une seule chose, d' accord, cela pourrait être la meilleure option. C'est bon. Donc oui, il s'agit de rendu conditionnel. Nous avons donc examiné le rendu conditionnel de plusieurs manières. La première consiste à utiliser FL. Ensuite, nous avons utilisé l'opérateur ternaire, puis nous avons vu à l'aide de l'opérateur logique et de l'opérateur. C'est bon. J'espère donc que vous avez pu me suivre, et j'espère que cela vous a été utile. 14. JSX et fonctions: Parlons maintenant de J six et de ses fonctions. Désormais, JSix vous permet d' utiliser des fonctions manière dynamique pour générer et renvoyer des éléments ou des composants, ce qui peut être utile si vous souhaitez encapsuler une logique dans une fonction et la réutiliser dans votre application Permettez-moi de vous en donner un exemple. Disons que j'ai cette salutation ici, qui est une simple salutation, bonjour, n'est-ce pas ? Disons que j'y ajoute un nom et que je le personnalise, donc je peux dire Alice Bonjour, Alice ici. OK. Maintenant, disons que je souhaite saluer plusieurs utilisateurs auxquels leur nom a été collé, afin que je puisse le dupliquer Bonjour Alice, bonjour Bob, disons. OK. OK, cela ne marchera pas parce que j'ai besoin d'une définition parentale conformément aux règles, non ? Je dois donc déplacer ça. Je vais couper ça, et je vais le coller ici, quelque chose comme ça. OK. Maintenant, cela fonctionnerait. Bonjour Alice, bonjour Bob. Il existe maintenant une meilleure façon de gérer cela. OK ? Ce que je fais, c'est essentiellement reproduire la façon dont je salue les utilisateurs en plusieurs blocs. OK ? Mais cette chose peut également être générée à l'aide de la fonction. C'est bon. Ce que je peux faire ici, c'est dire « fonction ». Oups, je dois désactiver les capuchons. Je peux dire fonction. Je peux envoyer un message de bienvenue ici. OK. Et je peux avoir le nom comme paramètre ici, non , et je peux le couper , j'en ai besoin. Et ici, je peux dire retour. Je peux l'ajouter ici. Au lieu d'Alice ici, je vais juste dire son nom. OK ? Je génère donc JSX à l'aide de cette fonction. Maintenant, comment puis-je m'en servir ? Je peux m'en servir à l'aide de la syntaxe des expressions. Je peux dire un message de bienvenue, et je peux transmettre Alice ici. Quelque chose comme ça. OK. Et je peux le sauvegarder, et vous verrez Hello Alice, hello boop. Donc je n'ai pas encore changé cela pour pop, d'accord, mais je vais me débarrasser du message d' accueil de Pop ici, et je vais convertir le message d' accueil de Bob en message pop. OK ? Maintenant, vous allez voir Hello Alice, Hello Bob. Je peux même en ajouter une autre. Bonjour, John. OK. Tu peux voir. Voici donc comment vous pouvez utiliser une fonction qui renvoie six et cet Aix peut ensuite être transformé en un composant au sein d'un composant. C'est bon. Donc oui, cela fonctionne, c'est que nous avons une fonction de message de bienvenue ici, simple fonction Ja Script qui prend le nom comme paramètre et renvoie un message d'accueil. Ceci est un message d'accueil. Et dans le composant de l'application, vous pouvez appeler cette fonction et transmettre le nom comme argument, et vous pouvez transmettre différents noms pour afficher des salutations personnalisées J'espère que cela a du sens, d'accord, vous pouvez même le faire de manière conditionnelle. OK ? Vous pouvez donc, de manière conditionnelle ou utiliser fonctions, décider quels éléments JSX doivent être rendus en fonction de certaines C'est ce que j'entends par rendu conditionnel. OK ? Permettez-moi donc de vous donner un exemple. Disons que, selon l'heure de la journée, j'ai envie de dire bonjour ou bonsoir. OK ? Donc, ce que je peux faire, c'est avoir une fonction ici. Je vais dire fonction. OK. Je vais dire bonjour, je dirais bonjour. OK ? Maintenant, si c'est le matin, c'est le matin, d'accord. Alors, que devons-nous faire ? Je renvoie chacune d'elles. Par ici, quelque chose comme ça. Je peux dire « bien ». Oups, bonjour, quelque chose comme ça OK. Et si cette condition n' est pas satisfaite, alors je peux revenir bonsoir, quelque chose comme ça. OK. Maintenant, ce que je peux faire ici est là, je peux utiliser des Const maintenant égaux à huit nouveaux, quelque chose comme ça Je peux dire que Const est en deuil ici, et je peux dire que maintenant, enseigné, obtenez C'est donc cette logique que j' utilise pour vérifier s'il s'agit de la leçon 12 ou d'une leçon supérieure à dix. Ce que je fais, c'est que je peux dire avec une expression, je peux dire des salutations, et je peux transmettre deuil ici, quelque chose comme ça Maintenant, je te souhaite une bonne soirée parce que c'est le soir ici, d'accord ? Donc je prends vraiment le temps de venir ici, non ? Mais oui, si c'est l'heure du matin pour vous, alors cette logique vous ramènera à bonjour ici. OK. Donc ce qu'il fait, c'est qu'il prend la date actuelle, d' accord, la date actuelle, et puis il obtient les R. OK, donc si RS est inférieur à 12, cela signifie que c'est le matin. Si ce n'est pas le cas, cela signifie que c'est le soir. Ce sera donc faux ici dans ce cas, et en fonction de cela, qu' il s'agisse de savoir si la valeur booléenne est vraie ou fausse, ou si nous sommes réellement en train de rendre le message d'accueil ici, Donc oui, cela peut être fait, et vous pouvez même Je voudrais également vous montrer un autre exemple dans lequel vous un autre exemple dans lequel vous pouvez avoir des fonctions qui renvoient JSX et peuvent également être passées en argument à une autre fonction ce qui permet une logique d'interface utilisateur plus complexe Supposons donc que nous voulions afficher une boîte d'alerte en fonction d'une condition. OK. Ce que je ferais, c'est créer une autre fonction. OK ? Je vais dire « Afficher l' alerte ici ». OK. Je vais avoir le problème ici et j'aurai un message. Maintenant, cette condition, oups, pas un message de bienvenue. Ce sera un message. Maintenant, cette condition que j'ai comme paramètre, c'est un booléen, Je vais donc faire une vérification booléenne pour cela. En cas de condition, retournez. OK. Et je peux renvoyer l' alerte ici. OK ? Je peux donc dire TIF et je peux ajouter un message ici, quelque chose comme ça. Comme ça. OK. Et je peux même le styliser ou faire ce que je veux. OK ? Cela peut donc être fait. C'est bon. Et sinon, je renvoie null, non ? Maintenant, permettez-moi d'appeler ça ici. Donc, ici, ce que vous pouvez faire, c'est avoir une sorte de syntaxe d' expression. Vous pouvez dire « Afficher l'alerte ». Vrai. OK. Ensuite, vous pouvez dire que c'est important, quelque chose comme ça. Cela pourrait être votre message. Je vais enregistrer ceci et vous verrez que c'est important. C'est ce que vous voyez ici, non ? Maintenant, ce que nous pouvons faire c'est dans le cadre de cette fonction particulière, je peux avoir un autre appel de fonction. OK ? Donc, ici, nous affichons cette alerte, nous créons cette alerte dans le cadre de cette fonction particulière. OK ? Donc, ce que je vais faire c'est ici que je peux avoir une fonction. OK, je peux dire boîte d'alerte, d'accord. Et ici je peux avoir un message. OK. Et ici, je peux dire « retournez et c'est ça ». OK. Maintenant, je peux également le styliser ici. Je peux rendre l'alerte un peu complexe car j'ai séparé le code dans une fonction distincte Et ici, je peux simplement appeler cette boîte d'alerte avec un message, et cela n'aura aucun impact sur le résultat ici ou sur le résultat que je reçois. OK. Et si tu viens ici, tu verras que c'est important. Nous voyons donc le résultat, d'accord ? C'est important, et vous pouvez voir comment cela se passe. Nous avons une fonction distincte pour générer la boîte d'alerte stylisée Vous pouvez dire : OK, ce n' est pas vraiment du style. Nous devons écrire du CSS pour cela, mais vous comprenez ce que j' explique ici. OK ? Je dois ajouter un point-virgule ici sur les relevés de retour. OK ? Tous les relevés de retour seront donc marqués d'un point-virgule. OK, j'ai réalisé que j'en avais raté quelques-uns. OK. Je pense que oui, ça devrait être bien ici. OK. Donc oui, cette fonction particulière est alors appelée par cette fonction ici. Nous effectuons donc un appel de fonction dans un appel de fonction, et nous renvoyons le Jx d'ici en fonction de la condition Et puis cette condition est rendue ici. OK ? C'est donc également autorisé, et c'est ainsi que cela fonctionnerait. Si je sauvegarde ceci, vous pouvez voir que la sortie est ici. C'est bon. J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre. 15. Commentaires dans JSX: Il est donc temps de commencer à parler de Commons dans JSX Il s'agit donc d'un simple fichier JSX à points d' application. D'accord ? Il y a du code JSix ici. C'est donc le code JSix que je renvoie, vous pouvez le voir, et le reste du fichier contient du code JavaScript D'accord ? Maintenant, je vois cette sortie ici. Cela fonctionne bien. Maintenant, si je veux ajouter des communs, d'accord ? Maintenant, il y a deux endroits ici ou il y a deux types de code. L'un est le code JSX qui se trouve ici, puis nous avons le code JavaScript qui existe dans le reste du fichier Ainsi, dans le code Ja Script, vous pouvez utiliser les commentaires habituels que vous utilisez normalement. Il s'agit donc d'un commentaire d'une seule ligne. Il s'agit d'un commentaire, et vous pouvez également avoir le commentaire multiligne dans le code Jascript Comme ça, c'est un commentaire sur plusieurs lignes, quelque chose comme ça. C'est comme ça qu'on écrit des commentaires en JavaScript, d'accord ? Mais vous ne pouvez pas le faire lorsqu'il s'agit de JA six. Donc, dans le code J six, si vous essayez de le faire, cela ne fonctionnera pas, n'est-ce pas ? Maintenant, comment écrivez-vous un commentaire ici ? Vous pouvez donc ajouter des commentaires comme celui-ci. J'ai donc simplement utilisé les raccourcis Control et Forward Slash, donc ajouté ces balises pour moi D'accord ? Donc, si vous souhaitez ajouter des commentaires dans Jasix, voici comment procéder D'accord. Vous voyez, il s'agit d'un commentaire. D'accord. Et vous pouvez ajouter un commentaire d'une seule ligne ou un commentaire de plusieurs lignes selon vos besoins D'accord. Donc, en fait, il s'agit d'un commentaire d'une seule ligne. Je peux même ajouter un commentaire sur plusieurs lignes ici. D'accord. Je peux le dire. Je vais voir qu'il s'agit d'un commentaire d'une seule ligne, et que c'est un commentaire de plusieurs lignes, je peux dire d'en prendre note ici, quelque chose comme ça J'espère que cela a du sens quant au fonctionnement commentaires dans le fichier GSX, et j'espère que cela est utile 16. PROJET : créer un site web portfolio en utilisant React: Il est donc temps de réaliser un projet en utilisant ce que nous avons appris jusqu'à présent et de réagir. Et qu'allons-nous construire ? Nous allons créer une page Web de portfolio simple. C'est bon. Vous pouvez donc voir ce portfolio ici. C'est ce que nous allons construire. Vous pouvez donc voir le nom, le slogan. Vous avez des sections telles que celles sur les projets en contact. Ceci est la section A, vous pouvez cliquer ici et vous rendre également sur À propos. OK. Et là, vous avez des projets. Vous pouvez donc cliquer sur projets et sur Bons projets. Vous avez ce projet 1, la description du projet et le lien vers le projet, le projet deux, le projet trois, etc. Ensuite, vous avez la possibilité de contacter ici, puis la FUTA, d' accord ? C'est assez simple. D'accord ? Il s'agit d'une application d'une seule page, d'une application Web , je dois dire, dans laquelle nous utilisons React J. C'est donc exactement ce que nous allons créer. Nous allons rester très simples, et l'objectif est d'apprendre et de mettre en commun tout ce que nous avons appris jusqu'à présent pour créer cette application afin de mettre en pratique. Commençons donc. Je suis donc ici sur le code Visual Studio, et j'ai ouvert l'app point JS, d'accord ? Et il s'agit simplement d'imprimer un message très simple appelé bonjour. C'est bon. Maintenant, ce que je vais faire c'est que nous allons venir ici. Et dans l'application fonctionnelle, d'accord, nous allons créer des variables. OK. Maintenant, ce sont les variables qui nous aideront à afficher toutes les informations que nous voulons afficher sur l'application d'une seule page que nous développons, d'accord ? La première variable que nous allons avoir est, bien sûr, le nom. OK, tu peux avoir le nom de ton choix ici. Je vais juste avoir ce faux nom appelé John Doe. Tu peux avoir un métier ici. OK. Et vous pouvez dire développeur full stack. Quelque chose comme ça. OK. Vous pouvez avoir des projets ici, quelque chose comme ça. Et ici , ce sera dans une sorte de format JCN OK, je peux dire le titre. Oups Title Colin et moi allons avoir le projet 1. Vous pouvez ajouter n'importe quel détail de projet ici, d'accord ? Description ici, quelque chose comme ça, et vous pouvez voir l'application Web. Construit avec React et Node Chase, quelque chose comme ça. N'importe quel type de description que vous pouvez avoir. OK. Je vais également avoir un titre. Désolé, ce n'est pas le titre. Il devrait y avoir un lien par ici. Le lien, je vais le garder sous forme de hachage. OK. Il n'est pas nécessaire d' ajouter un lien pour le moment, d'accord ? C'est ce que je pense parce que ce n'est pas un vrai projet, non ? Donc, ajoutez une virgule, et c'est pourquoi nous obtenons l'erreur. Je pense que c'est fait, d'accord ? Vous pouvez le dupliquer pour un autre projet, une virgule, un autre projet, le projet OK. Et vous pouvez parler d'une plateforme de commerce électronique. Oups, alors j'ai fait une erreur. C'est bon. Il s'agit donc d'une plateforme de commerce électronique. On peut dire qu'il s'agit d'une plateforme de commerce électronique. Construit à l'aide de Gingo. Tu peux dire quelque chose comme ça. D'accord ? Je n'ai que deux projets pour le moment, d'accord. Et maintenant nous pouvons venir ici. D'accord ? C'est donc un retour au bonjour. OK. Je n'ai pas besoin de te dire bonjour ici. OK. Donc, ce que nous pouvons faire, c'est que je vais déplacer ça. OK. Tout d'abord, pour cet onglet en particulier, j'aurai le nom de la classe sous forme d'application. Et je le fais parce que plus tard, je voudrais aussi le styliser. D'accord ? Maintenant, j'ai un en-tête. OK. C'est donc un en-tête HTML que j'ajoute. OK, permettez-moi d'ajouter. Nom de famille OK. Et c'est ce qu'on appelle un en-tête, quelque chose comme ça ici. OK. Maintenant, cet en-tête se trouve dans l'en-tête. Je vais apporter certaines choses ici. Je vais avoir chacune d'elles, et ce serait un nom, cela rendrait le nom ici. Je vais avoir un tag P. Cela ferait profession, quelque chose comme ça. Ensuite, je pourrai avoir un par E NAF ici. Je vais faire venir NAF ici. Je peux dire, oups, je peux dire E tag ici, et cela peut être à propos de HF et cela peut pointer vers HF et cela peut pointer vers un hachage, à propos vers HF et cela peut pointer vers un hachage, à 17. Introduction aux composants et création de votre premier composant: Salut, voilà. Bienvenue. Il est maintenant temps de commencer à parler de ce que sont les composants et de leur fonctionnement dans React. Je suis donc sur le site officiel de React, qui est React point TEF, et je vais comprendre que nous allons analyser ce site Web, comprendre et nous initier à ce concept de composants, n'est-ce pas ? Maintenant, observez ce site Web, d'accord ? Vous pouvez observer n'importe quel site Web, mais j'ai pris cet exemple parce que nous apprenons à réagir, et celui-ci est officiel. Si vous voyez en haut, il y a une barre supérieure, d'accord ? Vous pouvez l'appeler un en-tête ou la barre de navigation supérieure ou ce que vous voulez Maintenant, à l'intérieur, il y a comme logo sur le côté gauche, la version, d'accord ? Vous pouvez voir la barre de recherche, les éléments de navigation tels que Learn Reference, le blog communautaire et d'autres options ici. OK ? Vous pouvez faire défiler le site Web, d'accord ? Maintenant, si vous modifiez la page ici, référence, communauté, apprentissage, vous pouvez voir cette barre supérieure reste telle quelle. Cela ne change pas, n'est-ce pas ? Il est statique sur toutes les pages. en va de même pour le pied de page. Par ici. OK ? Donc, ce que je voulais dire ici, c' est que chaque fois que vous créez des applications Web ou des logiciels, certains composants ou éléments de votre application seront votre application identiques et pourront être réutilisés, n'est-ce pas ? Maintenant, dans le développement Web traditionnel, ce qui se passait auparavant, c'est que si vous créez ce type de site Web, vous créiez cette page ici. Ce code sera écrit en haut pour afficher cette interface utilisateur. Lorsque vous créerez la page d' apprentissage ici, cette page, vous reproduirez à nouveau ce code qui crée cet élément particulier en haut OK ? Si vous créez une page de référence, vous la reconstruirez en haut. Cela se produisait donc dans le développement Web traditionnel, d'accord ? Et comme vous pouvez l'imaginer, il y a eu beaucoup de répétitions, non ? Maintenant, si demain je dois apporter des modifications à la barre de navigation supérieure, je voudrais ajouter une autre option ici. Je dois donc me rappeler d'apporter des modifications à tous les fichiers, quel que soit l'endroit où cette barre supérieure est utilisée, n'est-ce pas ? Et c'était fastidieux, pas facile, et ce n'était pas une bonne pratique, n'est-ce Maintenant, avec le concept de réutilisabilité. OK ? Il existe donc un concept de réutilisabilité, qui signifie que vous créez des éléments une seule fois et que vous réutilisez plusieurs fois au cours du cycle de vie de l'application Donc, la réutilisabilité signifie que vous avez créé cette barre en haut, un pied de page en bas, et vous pouvez simplement la réutiliser sur toutes les pages OK ? C'est ce que signifie la réutilisabilité, non ? Et cela est possible à l'aide des composants de React. OK. Alors, qu'est-ce qu'un composant de réaction ? Donc si tu vas apprendre à réagir ici, d'accord ? Je l'ai donc ouvert ici. OK, donc vous pouvez voir ici. Un composant est un élément de l' interface utilisateur qui possède sa propre logique et sa propre apparence. OK ? Il peut être aussi petit qu' un bouton ou aussi grand qu'une page entière. OK ? Alors laissez-moi le dire ainsi. Les composants React sont la pierre angulaire de toute application React. OK ? En fait, il s'agit d'un élément d'interface utilisateur ou d'interface utilisateur réutilisable qui peut être défini par le développeur et qui vous permet de l'utiliser, le réutiliser à plusieurs endroits dans une seule application. Donc, par exemple, je vous ai donné l'exemple de cette barre en haut, d'accord ? Vous le créez une fois et vous le réutilisez dans l' ensemble de l' application, d'accord ? Et elle est indépendante. Il possède son propre code. OK. Demain, si vous voulez apporter un quelconque changement, vous n'aurez qu'à le faire dans un seul fichier, et cela se reflétera partout. C'est un avantage des composants. OK ? Maintenant, vous pouvez voir que c'est ainsi que vous pouvez créer des composants, d'accord ? Maintenant, avant de parler de ce bout de code, permettez-moi de vous dire une dernière chose. Les composants dans React peuvent être créés de deux manières. La première consiste à utiliser les fonctions, comme vous pouvez le voir ici sur mon écran. Une autre méthode consiste à utiliser les cours. Maintenant, classes, si vous explorez le dernier code dans React, vous ne verrez pas beaucoup d'utilité des classes là-bas. Les fonctions sont donc utilisées partout. C'est donc à cela que nous allons nous en tenir. Et les composants créés à l'aide fonctions sont appelés composants fonctionnels, n'est-ce pas ? Vous pouvez donc voir ce bout de code ici. C'est une fonction de script Ja. Vous pouvez voir que les composants React sont des fonctions de script Ja qui renvoient un balisage. C'est vrai. Vous pouvez donc voir ici qu'il s'agit d'une fonction, une fonction de script Ja, qui renvoie JSX, le balisage, n'est-ce pas ? Et voici un exemple très simple d'un composant qui n' est qu'un bouton. OK ? Vous pouvez donc voir comment il renvoie ce bouton, et vous pouvez utiliser ce bouton dans votre application, d' accord, où vous voulez l'utiliser. OK. Donc, ici, vous pouvez voir qu'il l'utilise dans mon application ici, et qu'il affiche le bouton ici. OK ? Maintenant, il y a une chose que vous devez noter ici, c'est qu'il est écrit que cela commence par une majuscule. OK ? Les noms des composants React doivent donc toujours commencer par une majuscule tandis que balises HTML doivent être en minuscules OK ? Vous pouvez donc voir ici. OK. Cela commence par une majuscule, non ? C'est ainsi que les composants sont créés. Maintenant, vous avez également un éditeur avec lequel jouer. OK, vous pouvez voir que c'est le bouton qui a été créé. Bien sûr, tout cela se trouve dans le même fichier app point js. Vous pouvez créer plusieurs fichiers. Ainsi, par exemple, vous pouvez créer un button ou un mybutton J séparément ici, et vous pouvez avoir myapp point js là où vous utilisez OK ? Cela peut également être fait. Mais ici, l'exemple montre cela dans un seul fichier ici. OK ? Alors voilà, si tu vois mon bouton, d'accord ? Et je peux réutiliser le bouton ici. Donc, si je le veux, je peux m'en servir dix fois ou autant de fois que je le souhaite. C'est possible et si je veux modifier le texte ici, je dois le faire à un endroit, et je suis un bouton pour dire bonjour. Désolée. Chante bonjour. Tu peux voir. Je me suis reflété dans tous les usages. Vous pouvez voir que je l'utilisais à plusieurs endroits, non ? Vous pouvez donc voir que cela se reflète partout. C'est donc un avantage des composants. Imaginez maintenant que si vous n'utilisez pas le composant, vous utilisez en fait ce bouton de code et vous le rendez dix fois de cette façon. Demain, si vous souhaitez apporter une modification à la copie ici ou demain si vous souhaitez mettre à jour un texte ou un style quelconque, vous devez le faire partout ou demain si vous souhaitez mettre à jour texte ou un style quelconque, , n'est-ce pas ? Et ce n'est pas une bonne chose parce que, vous savez, cela introduit la possibilité d'avoir des erreurs dans l'application parce que nous sommes des humains, n'est-ce pas ? Nous, les développeurs, sommes des humains. Il se peut que vous manquiez d'apporter un changement dans une pièce en particulier, n'est-ce pas ? Et cela introduirait toutes sortes d'erreurs dans l'application. Ce n'est donc pas recommandé, mais cette méthode de composants est recommandée, non ? Et vous pouvez l'utiliser dans votre application, non ? Donc, ce que je ferais, c'est que puisque maintenant nous avons une certaine clarté sur ce que sont les composants de réaction , d' accord, nous passerons à notre application. J'ai créé cette application React, d'accord, avec une application très simple point Jx Maintenant, ici à PadT Jasix , vous pouvez voir que j'ai un message d'accueil très simple, très simple : je vais revenir ici, n'est-ce Et c'est en fait un composant, d'accord ? Donc, si vous voyez ici dans main.j6, je suis en train de rendre l'application ici en root Et j'importe une application depuis App point Jx, et l'application est exportée ici, vous pouvez le voir, n'est-ce pas ? Donc oui, c'est aussi un exemple de composants. OK ? Nous voyons le point-virgule d'export Oops IMS Je vais juste l'ajouter. OK. Mais vous pouvez voir comment cela fonctionne. Vous pouvez également ajouter des composants ici dans ce fichier lui-même. OK ? Donc, ce que je peux faire, c'est prendre ce bout de code. Je peux créer un bouton. OK. Donc ce que je vais faire, c'est venir ici. OK. Je vais ajouter un bouton de cette façon. OK ? Je suis un bouton qui dit bonjour, et je peux en ajouter un. OK ? Mais avant cela, laissez-moi vous montrer à quoi ressemble la sortie actuelle. Donc, la sortie actuelle dit bonjour car aucun bouton n'est impliqué pour le moment. Je n'ai pas encore vu le fichier. OK ? J'ai maintenant créé un bouton. J'ai parlé de fonction, de mon bouton. Je suis un bouton et je dis bonjour ici. OK. Maintenant, je peux venir ici et je peux dire mon bouton, quelque chose comme ça, et je vais le fermer et vous pouvez voir un bouton entrer ici, n'est-ce pas ? Et je peux juste le reproduire comme je veux, d'accord ? Je peux donc ajouter autant de boutons que je le souhaite. Vous pouvez voir qu'il y a tellement de boutons ajoutés, n'est-ce pas ? Ce sont tous des boutons. Demain, si je dois modifier l'interface utilisateur, comme je l'ai dit, je dois le faire au même endroit, non ? Et tout cela arrive en fichier unique, non ? Je pourrais vouloir modulariser le code. Il n'est donc pas recommandé d'avoir plusieurs composants dans un seul fichier. Donc, ce que je dois faire, c'est créer un nouveau fichier ici. Sous SRC, je vais dire mon bouton. J'ai enseigné JAX ici. OK. Et je vais couper ce code, et je vais le déplacer ici. OK ? Quelque chose comme ça. Et ici, je vais dire exportation ou par défaut, et je vais dire MyPTON ici , quelque chose comme ça Et ici, je vais juste le faire importer. Donc, dès que j'appuie sur Ctrl et espace ici, d'accord, cette ligne est importée. Vous pouvez même taper cette ligne en haut. OK ? Vous êtes en train d'importer mon bouton depuis ce fichier, d'accord ? Si vous maintenez le contrôle, et si vous passez la souris dessus, vous verrez qu'il est converti en lien, et vous pouvez accéder à ce fichier si vous le souhaitez accord ? Et si vous l'enregistrez, le résultat ne changera pas, mais le code est désormais beaucoup plus modularisé. OK ? Vous avez donc créé un composant et vous l'utilisez dans votre application. accord ? J'espère que cela a du sens. Et j'espère que cela vous sera utile. J'espère que vous comprenez l' importance des composants. C'est donc un exemple très simple que j'ai démontré. Mais imaginez que vous créez une application complexe dans laquelle vous gérez plusieurs profils d'utilisateurs, n'est-ce pas ? Désormais, il peut y avoir plusieurs types d'utilisateurs et vous souhaiterez peut-être afficher les informations de profil à différents endroits de l'application. Vous pouvez donc avoir un composant, n'est-ce pas ? Vous pouvez avoir un composant d' image de profil pour afficher l' image de profil d'une certaine manière. Et vous pouvez le réutiliser plusieurs fois et à plusieurs endroits. Par exemple, si vous souhaitez afficher une image de profil sur l'écran d' accueil, n'est-ce pas ? Vous pouvez donc utiliser ce composant. OK, si vous souhaitez l'afficher sur la page Modifier le profil, vous pouvez afficher utiliser ce composant, n'est-ce pas ? C'est donc valable si vous avez des exigences personnalisées. Ainsi, par exemple, les photos de profil sont normalement affichées en cercle, n'est-ce pas ? Chaque fois que vous accédez à une application, les photos de profil sont affichées en cercle, n'est-ce pas ? Vous souhaiterez donc peut-être avoir une sorte de vue circulaire dans laquelle vous affichez la photo de profil de l'utilisateur. Vous pouvez donc créer un composant pour cela et le réutiliser dans l'application où vous souhaitez afficher l'image. Hein ? Et s'il y a un changement dans l'interface utilisateur demain pour afficher la photo de profil, vous apportez des modifications dans ce fichier, et cela se répercute sur l'ensemble. C'est tellement bon et tellement utile, non ? J'espère donc que vous avez une bonne compréhension de l' importance des composants et des éléments constitutifs de l'application React, et j'espère que cela vous a été utile. 18. S'initier aux composants: Il est donc temps de passer à l'action et de nous entraîner avec les composants, n' est-ce pas ? Et ici, j'ai une application React, qui affiche le portfolio d'un développeur Vous pouvez donc voir cette application ici. D'accord ? C'est une application très simple. Mais le problème avec cette application est que tout ou est rendu à partir d'un seul fichier. Donc, si je dois vous donner une liste ici, d'accord ? Euh, laissez-moi faire défiler la page vers le haut. Donc d'accord, il s'agit du point d'application JSX, qui est rendu par point principal JSX dans l'élément racine Et dans app.j6, vous utilisez ce fichier CSS et vous avez cette application fonctionnelle qui est utilisée Et à l'intérieur de cela, vous avez ces variables. OK, d'abord, nous avons ces variables. Ensuite, nous renvoyons ce JSix qui utilise ces variables, comme les données stockées dans les variables, et nous les rendons Ce que nous allons faire, c'est modulariser cela et introduire certains composants ici Cela va donc nous donner un peu de pratique avec les composants. Donc, tout d'abord, nous allons modifier l'en-tête ici. Donc, ce que je vais faire, c'est venir ici en SRC. Je vais ajouter le point d'en-tête Jx. OK. OK. Je vais d'abord créer tous les fichiers. Donc, l'en-tête JSix est ce dont je vais avoir besoin. Il me faudra environ deux à six J. OK. Je vais également avoir besoin que vous puissiez dire, liste de projets que j'ai six ici. Je vais aussi avoir besoin de contacter Jix ici, et j'aurai besoin d' un pied de page à la fin, qui est Puta tout, J six et j'aurai besoin d' un pied de page à la fin, qui est Puta tout, OK. Maintenant, pour mieux organiser cela, je peux introduire un dossier ici et je peux dire des composants ici, et je peux déplacer tous les fichiers nouvellement créés que je viens de créer dans ce dossier particulier. D'accord ? Cela semble donc un peu clair, y compris en ce qui concerne la liste de projets d'en-tête de contact. J'ai tout déménagé. C'est bon. Maintenant, ce que nous allons faire, c'est que je vais venir ici dans app point JSX, et d'abord, nous allons travailler sur le point d'en-tête JSX Je vais donc prendre cette section d'en-tête ici, d' accord, toute cette section d'en-tête ici. Hein ? Et je vais le déplacer dans le composant. D'accord ? Donc, ce que je vais faire est ici dans l'en-tête. Ce que nous devons faire, c' est créer avant tout. J'ai besoin d'une fonction. Déclaration de fonction, je vais dire en-tête. Et ici, dans les paramètres, je n'ai besoin de rien. OK. Et je vais y retourner. accord ? Nous devons renvoyer le JSX OK. Je vais donc renvoyer cette partie ici. Je vais le coller . C'est bon. Maintenant, le nom et le métier sont absents ici. Donc, ce que je dois faire, c'est faire défiler la page vers le haut, je vais couper ou mettre ces deux éléments ici, et j'ajouterai le nom et la profession ici, quelque chose comme ça. D'accord ? Donc c'est fait, d'accord ? Et oui, c'est ça. Je dois ajouter une déclaration d'exportation ici. Je peux dire exporter par défaut, et je vais exporter la tête. OK, quelque chose comme ça. Et ça y est. Maintenant, dans ce fichier en particulier, je vais faire défiler la page vers le bas et ici, à la place de la section d'en-tête, je peux dire en-tête. Vous pouvez voir ce composant et je peux appuyer sur Entrée. Au moment où je le fais, je dois m' assurer de fermer automatiquement le tag également ici. Dès que je l'ai ajoutée ou que je l'ai sélectionnée dans la suggestion de commande, vous pouvez voir cette déclaration d'importation être ajoutée en haut, ce qui signifie que nous importons la tête du composant ici. Et d'accord, il y a un problème. L'application ne fonctionne pas comme prévu. Laissez-moi voir quel est le problème ici. Je vais donc simplement vérifier l' erreur ici dans la console. D'accord ? L'erreur indique que la profession n' est pas définie dans l'application JA 626 OK, j'ai eu l' erreur, au fait. Nous avons donc déplacé la profession dans l'en-tête, d'accord ? Et c'est nécessaire dans l' app point JSX, je devrais dire ici Vous pouvez voir la profession et aussi, je dirais que le nom est nécessaire. OK. Je vais donc simplement garder les variables ici. Nous supprimerons ces variables à la fin pour éviter tout problème. C'est bon. Et maintenant, si vous venez ici, vous pouvez voir que l'en-tête fonctionne parfaitement, d'accord. Sans aucun problème. Cela est donc absolument rendu à partir d'ici. Vous pouvez voir la section d'en-tête. D'accord ? Je vais juste supprimer ce commentaire maintenant. OK. Et oui, ou nous nous en tiendrons au commentaire. Nous l'enlèverons à la fin. D'accord ? Maintenant, faisons de même avec le A. D'accord ? Maintenant, je vais couper cette section à propos d'ici. OK. Et pour A, nous avons déjà créé un fichier appelé JSX ici D'accord ? Donc, ce que je vais faire, c'est ajouter une fonction, sans aucun paramètre, et je vais dire return, o et je vais coller ce Jx, quelque chose comme ça OK, donc c'est fait. OK. Et je vais juste appuyer sur la touche Tab pour cela. C'est bon. Il s'agit donc de, et je dois ajouter export ici, export par défaut, A ici, quelque chose comme ça. C'est bon. Je vais enregistrer ceci et si vous venez ici, je dois importer environ. C'est bon. C'est fait, et si vous venez ici, accord, nous constatons à nouveau un problème. Le problème, c'est que le nom et la profession n'existent pas. J'ai donc également besoin de ces deux clés. Je vais donc prendre les skis, désolée, ne pas prendre ces variables ici et je vais les battre ici. OK. Je vais enregistrer ceci et vous devriez voir le résultat. Tu peux voir. A est également en cours de conversion en composant. D'accord ? Si tu viens ici, fais défiler la page vers le bas. A est terminé. Nous avons des projets. Je vais donc prendre la section du projet comme ceci. Je vais aller ici. Je vais ajouter une fonction, quelque chose comme ça, des projets ou une liste de projets. Quelque chose comme ça. Aucun paramètre, LO, et je vais juste obtenir la liste des projets que nous sommes également en train de définir ici, cette liste. D'accord ? Je vais donc ajouter cette liste ici. Oups. Il y a donc un problème. Cela devrait faire partie de la déclaration de retour, n'est-ce pas ? Il doit donc être retourné. Donc je vais juste couper ça. Quelque chose comme ça. D'accord ? C'est donc chose faite. OK, nous renvoyons ce GA Six, et nous avons ces projets pour le trouver au sommet. D'accord ? Cela a du sens, et je vais exporter par défaut, et je dirais liste de projets. Quelque chose comme ça. OK. Et ici , dans app.j6, je vais venir Section des projets, je dirais liste de projets , balise à fermeture automatique, et nous verrons si la liste est rendue correctement, n'est-ce pas ? Nous ferons de même pour le contact. D'accord ? C'est à peu près la même chose pour déplacer ça. D'accord ? Alors contactez, je viendrai ici. Je dirais fonction, contact. Je vais m'en débarrasser, puis je dirai revenir ici. Comme ça. Et puis je l'ai fait, d'accord ? Et je vais dire exporter par défaut, et je dirais contact. Oups. Je vais donc dire «   contact ici ». Comme ça. OK. Et tu dois utiliser le contact ici. D'accord ? Je vais donc dire contact. Et oui, Footer fera de même. Je vais couper ça. Nous allons passer à footer.j6 et je dirai function, Futter Okay. Ensuite, je dirai « revenez ici ». Comme ça. Et je vais avoir le Puta t, et j'ajouterai le tag **** OK. OK, vous ne voyez donc pas **** comme une importation ici parce que vous n'avez pas exporté. D'accord ? Je dois donc dire exporter Puta par défaut. OK. Et puis par ici, Puta Tu devrais voir Puta arriver ici. OK. Et du bronzage, du bronzage, non ? Maintenant, si tu viens ici, tout devrait fonctionner, absolument, d'accord ? Tu peux voir. Bien, nous allons faire un petit nettoyage dans ce fichier en particulier, afin de ne pas avoir besoin de ces variables. Je vais m'en débarrasser. OK. Et je vais me débarrasser des commentaires, d'accord. Donc quelque chose comme ça. C'est bon. Et oui, on va bien. Je vais juste aligner un peu les choses. Tout va bien maintenant. Tu peux voir. C'est donc notre composant d'application maintenant, d'accord, qui comporte plusieurs autres composants comme la liste de projets headbo, contact FUTA Et ce sont tous des composants individuels maintenant, d'accord, qui sont rendus ou qui sont créés séparément. accord ? Ce sont tous des composants individuels, et quel est le point à retenir ici, d'accord ? Demain, si vous souhaitez ajouter plusieurs composants dans un seul projet, c'est tout à fait possible. Ce n'est pas comme si vous pouviez avoir un seul composant dans un projet React ou quelque chose comme ça. Une telle règle n'existe pas. Vous pouvez avoir autant de composants que vous le souhaitez, d'accord ? Et tu peux l'utiliser de cette façon. Maintenant, demain, si je veux changer l'ordre ici, si je veux me déplacer en dessous liste des projets, je peux facilement le faire. Vous pouvez voir que cela a changé. Je peux faire des contrôles et je peux le ramener à son état d'origine, non ? C'est donc possible, non ? De plus, une chose dont vous vous souvenez, c'est l'application ici est un composant lui-même. Et dans ce composant, nous introduisons d'autres composants. Vous pouvez voir que l'application est un composant en soi, et dans ce composant, nous saisissons d'autres composants tels que en-tête, l'arc, la liste des projets, le contact, le potter. C'est donc possible, non ? Une application elle-même est un composant, elle est rendue ici. Donc, si vous allez au point principal Jx, il est rendu ici dans l'élément racine, n'est-ce pas ? Donc, élément racine dans le fichier main.j6, ce qui est rendu app point JSX, composant d' Et le composant de l'application rend ces nombreux composants en lui-même, n'est-ce pas ? Le composant peut donc également afficher d'autres composants, ce qui est parfaitement valide et cela ne pose aucun problème, n'est-ce pas ? Vous pouvez donc imaginer à quel point les composants sont modulaires. Ils vous permettent donc d'introduire de la modularité dans votre code. Ils vous permettent de décomposer l'ensemble de votre application en petites parties faciles à gérer Donc demain, si je veux modifier l'en-tête, d'accord ? En-tête dans l'application. Je dois juste apporter des modifications à ce fichier. D'accord, si je dois apporter des modifications au FUTA sur l' ensemble de l'application Web, je dois simplement apporter des modifications ici C'est ça, non ? C'est donc de la réutilisabilité. Une fois le composant créé, vous pouvez le réutiliser plusieurs fois. Vous pouvez réutiliser FUTA plusieurs fois où vous le souhaitez, n'est-ce pas ? Maintenabilité, bien sûr, en raison de la réutilisabilité et de la modularité, elle vous permet de maintenir ces Et je dirais qu'il y a également une séparation des préoccupations, car les composants vous aident à organiser le code en séparant les différents éléments dans leurs propres fichiers individuels, n'est-ce pas ? C'est donc un individu, c'est un bloc autonome, c'est ce que je dirais, non ? Il existe donc une séparation des préoccupations dans le cadre de laquelle vous avez votre propre fonction. Le composant a sa propre fonction, son propre JSX, sa propre interface dans son propre fichier lui-même, n'est-ce pas ? Il est donc autonome, non ? Donc oui, il s'agit de composants dans React. Et encore une chose que je voudrais mentionner si vous souhaitez utiliser ou réutiliser le composant, vous devez ajouter cette exportation en bas chaque fois que vous créez cette fonction de cette façon, n'est-ce pas ? Et qu'une fois que vous aurez ajouté l'exportation, ce n'est qu'alors que vous pourrez la saisir de cette façon dans le fichier où vous voulez l'utiliser, n'est-ce pas ? Nous n'avons donc pas écrit cette entrée car si je la supprime , disons. Puta. Si je l'enregistre, je vais avoir un message d'erreur, bien sûr. Cela ne va pas fonctionner. Et si vous voyez la console, elle va vous envoyer le message d'erreur. Tu peux voir. Potter n' est pas défini. Maintenant, pour intégrer Putter, vous pouvez taper toute cette ligne de saisie, ou ce que je suggère, c'est d' appuyer simplement sur Ctrl et espace Contrôle et espace sous Windows, commande et espace sur Mac, vous pouvez voir cette suggestion, avec cette importation ici. Vous pouvez voir que je vais le sélectionner. Et dès que je sélectionne cette option, l'entrée est automatiquement ajoutée en haut. Il n'y a aucun problème en tant que tel. Si je l'enregistre, l'application recommence à fonctionner, vous pouvez voir, elle fonctionne à nouveau, non ? Donc oui, j'espère que c' était plutôt bien, et j'espère que vous savez comment créer plusieurs composants et les organiser au sein d'une seule application. J'espère que cela vous a donné un aperçu de l'importance des composants lorsque vous travaillez avec React. 19. Accessoires - Une introduction: Bienvenue, et il est temps que nous parlions d'accessoires dans React. Maintenant, pour démontrer la même chose, j'ai cette application très simple. Donc, si vous voyez, j' ai ce point principal Qx, qui affiche cette application sur l'élément racine Et c'est une application ici, qui ne fait que rendre bonjour ici. Vous pouvez donc voir Hello comme sortie ici, n'est-ce pas ? Maintenant, laissez-moi créer un scénario. Disons que vous créez ou affichez des profils d'utilisateurs, n'est-ce pas ? Vous créez donc une application dans laquelle vous souhaitez afficher les profils utilisateur de différents ensembles d'utilisateurs, n'est-ce pas ? Maintenant, ce que je ferais, c'est créer un autre composant. D'accord ? Je dirais que c'est une carte de profil ici, ou point Jx ici D'accord. Et à l'intérieur, je vais avoir une fonction. Je vais dire carte de profil. Oups. Je vais donc dire carte de dossier ici. Je vais me débarrasser des paramètres. Et ici, je vais rendre du GSX. D'accord ? Nous devons donc retourner à l'interface. Maintenant, quelle est l'interface que vous retournez ? Je vais rester très simple, non ? Je vais avoir un TIF. Je vais prendre H deux. Je vais dire le nom ici. Nous allons afficher le nom et le code « je ». Ou restons-en au nom ici. D'accord ? Nous allons nous en tenir au nom pour le moment. Et bien sûr, je vais ajouter l'exportation ici, par défaut, et je dirais la carte de profil, quelque chose comme ça. D'accord ? Maintenant, je dois utiliser la carte de profil ici. Ce que je dois faire, c'est dire carte de profil, quelque chose comme ça, et je vais l'importer. D'accord ? Vous pouvez donc voir l' instruction d'entrée directement en haut. Je vais juste le réduire pour que nous ayons plus de place. Et maintenant, si vous accédez à l'application ici, vous pouvez voir le nom s' afficher ici, ce qui signifie que le rendu de notre composant est réussi. D'accord ? Maintenant, nous allons venir ici. Je dois montrer le nom d'utilisateur ici, non ? Donc, ce que je peux faire ici, c'est que je peux dire constant. Je vais créer une variable. Je vais dire le nom, et je l'appellerai Alice. D'accord ? Voici donc un script Java que j'écris, et je vais utiliser ce JavaScript dans JSX comme celui-ci, et je vais dire OK Maintenant tu vas dire que tu vas voir le nom d'Alice ici, d'accord ? Donc, pour des raisons de commodité, je vais simplement le remplacer par H trois, quelque chose comme ça. D'accord ? Comme vous pouvez le voir, elle s'appelle Alice ici. D'accord ? Donc d'accord, donc ça marche bien. Supposons maintenant que notre application s'étende et qu'il s'agisse d'une application multi-utilisateurs. Maintenant, vous voudrez peut-être utiliser cette carte de profil pour afficher les informations de plusieurs utilisateurs, n'est-ce pas ? heure actuelle, ce que nous faisons, c'est afficher SLA codée en dur ici. Je ne veux pas faire ça. Je veux que cela reste aussi dynamique que possible, et il y aura des scénarios lesquels nous pourrions obtenir des données à partir du back-end, nous pourrions obtenir des données à partir des données saisies par l'utilisateur. Nous pouvons obtenir des données de n'importe où, n'est-ce pas ? Je devrais donc être capable d'avoir une sorte de dynamicité dans ce composant en particulier, ce qui me permettrait de rendre ce nom en fonction de ce est passé ou de ce qui est disponible, n'est-ce pas Alors, comment pouvons-nous faire en sorte que cela se produise ? C'est donc là que le concept d' accessoires entre en scène, n'est-ce pas ? Alors, quels sont les accessoires de React ? Ils sont utilisés pour transmettre des données d' un composant à un autre. Alors imaginez ça. Ce que je veux dire par là, c'est un composant, c'est un autre composant, n'est-ce pas ? Vous voulez utiliser la carte de profil dans ce composant ici , n'est-ce pas ? Maintenant, où que vous les utilisiez, vous auriez une sorte de données, n'est-ce pas ? Par exemple, je pourrais passer un appel EPI ici, disons, un appel API ici, et je pourrais récupérer le nom d'utilisateur sur ce serveur, Je récupère le nom d'utilisateur, n'est-ce pas ? En fait, je ne le fais pas, mais disons que j'ai un appel d' API dans lequel je récupère le nom de l'utilisateur depuis le serveur en utilisant JavaScript, n'est-ce pas Et je pourrais utiliser ce nom, et peut-être l'afficher avec une carte de profil, n'est-ce pas ? La carte de profil est un composant que je souhaite utiliser. Alors, comment puis-je transmettre ce nom que j'ai reçu ici ? Et affichez-le avec une carte de profil. Il n'y a aucun moyen de le faire, n'est-ce pas ? Mais avec l'aide d' accessoires, vous pouvez le faire. Vous devez donc utiliser des accessoires pour activer cette fonctionnalité, n'est-ce pas ? Donc, ce qui se passe ici, c'est comprendre que cette application est un composant parent, qui affiche cette carte de profil enfant. Pourquoi la carte de profil est-elle un enfant ? Parce qu'il est rendu dans l'application. Et par conséquent, l'application est un composant parent, et c'est un composant enfant, n'est-ce pas ? accessoires dans React sont donc utilisés pour transmettre des données d'un composant à un autre, particulier d' un composant parent à un composant enfant Et avec l'aide d'accessoires, les accessoires contribuent à rendre les composants plus flexibles et réutilisables, En ce moment, nous avons codé Alice en dur ici. Bien entendu, vous ne pouvez l'utiliser que pour afficher les informations d'Alice. D'accord ? Mais si je supprime cet élément codé en dur ici et si je le rends dynamique, quelque chose de dynamique ici, cela me permettra d'utiliser cette carte de profil pour afficher toutes sortes d' informations utilisateur, n'est-ce pas ? Permettez-moi de vous le démontrer. Alors je vais m'en débarrasser ici, d'accord ? Et je vais ajouter un paramètre ici. Je vais dire des accessoires, quelque chose comme ça, d'accord ? Et ici, je vais parler d'accessoires. Nom du point, non ? Maintenant, d'où viennent ces accessoires ? Donc pour le moment, il n' affichera rien, d' accord, parce que nous ne sommes en train de rien transmettre. Donc voilà, je dois réussir. Je dois donc dire que le nom est égal à, et je peux dire, allons-y. Ok, donc je peux voir Alice. Tu peux voir Alice, non ? Maintenant, si je duplique cette carte, laissez-moi dupliquer cette carte ici. Je peux voir Joan. D'accord. Vous pouvez voir John se faire incarner. C'est donc ce dont je parlais. C'est la dynamicité que les accessoires ajoutent. D'accord. Sans cela, si vous avez codé Alice en dur ici OK, imaginez ça. Tu as codé Alice en dur ici. D'accord. Alors ça ne marchera pas. D'accord ? Je ne suis donc pas en train de coder en dur pour le moment Je ne vais pas annuler mon code, d'accord ? Mais si vous codez Alice en dur ici, vous pouvez imaginer, comme si je dupliquais cette carte de profil, je verrai Alice partout, non ? Parce que c'est codé en dur. Mais en ce moment, ce qui se passe c'est que je transmets dynamiquement cet élément ici ou je devrais dire cette propriété ici, et elle est utilisée pour afficher les informations. C'est bon. Donc oui, c' est ce que sont les accessoires Donc, les accessoires sont une forme abrégée de propriétés, d'accord ? Et c'est un moyen de transmettre des données d'un composant à un autre dans React, d'accord ? Et ils sont utilisés pour rendre les composants plus réutilisables en transmettant différentes valeurs en entrée au composant, n'est-ce pas ? Donc, au lieu de coder en dur le nom et toutes les autres informations contenues dans le composant, vous pouvez les transmettre comme accessoires, d'accord ? J' aimerais répondre à une autre question à laquelle vous pensez peut-être. D'accord, j'ai dit, je vais avoir les informations utilisateur disponibles dans ce composant, n'est-ce pas ? Parce que je passe un appel à l'EPA, ou je pourrais appeler la base de données ici, n'est-ce pas ? Maintenant, la question que vous pourriez vous poser est au lieu d'utiliser des accessoires, si je déplace l' appel de l'EPA d'ici à ici ? Hein ? C'est une très bonne question. Mais je vais vous dire une chose, si vous faites cela, vous n'avez pas besoin d' utiliser d'accessoires, n'est-ce pas, parce que vous avez les informations utilisateur ici, vous pouvez les récupérer et les afficher ici. D'accord. Mais laissez-moi vous dire que si vous codez en dur l'appel d'API, vous définissez comment ce composant particulier récupère les données. D'accord ? Vous ne voudrez peut-être pas le faire car, selon le scénario, vous pouvez récupérer les informations à différents endroits Ainsi, par exemple, si vous affichez ici les informations du profil, vous récupérez les données depuis le serveur, disons Si vous utilisez cette carte de profil dans un autre fichier et que vous souhaitez y afficher les informations de la base de données. Donc, au lieu d'un appel d'API, vous pourriez avoir un appel de base de données ici ou une sorte d'autre appel ici. D'accord ? La récupération des données est donc complètement découplée ici du composant Si vous commencez à coder en dur l' extraction de données dans le composant, cela sera restreint Ici, nous avons donc racheté le composant de données, tout comme la partie de récupération. D'accord ? récupération des données se fait en dehors du composant, et nous ne faisons que transmettre les données que nous récupérons au composant Le composant se concentre donc uniquement sur le rendu des informations. J'espère que cela vous sera utile et j' espère que vous pourrez vous en faire une idée. Maintenant, certaines choses que vous devez garder à l'esprit à propos des accessoires sont le flux des accessoires Les accessoires sont donc transmis d'un composant parent à un composant enfant J'ai déjà expliqué ce qu'est le composant parent. Dans notre cas, le composant parent est l'application ici. Donc, dans ce cas, il sera transmis du parent à l'enfant, est-à-dire de l'application à carte de profil, car la carte de profil est rendue dans l'application. La carte de profil est donc un composant secondaire, non ? C'est donc ainsi que le flux fonctionnerait. Il s'agit donc du flux d' accessoires du parent à l'enfant. Un autre point que je voudrais aborder est l'immuabilité. D'accord ? Les accessoires sont donc en lecture seule C'est quelque chose dont tu dois te souvenir. Les accessoires sont en lecture seule, c'est-à-dire les composants secondaires. Ainsi, quels que soient les accessoires que vous transmettez, les composants enfants ne peuvent pas modifier les accessoires qu'ils reçoivent Au lieu de cela, le parent contrôle les données et les transmet selon les besoins. accord ? Donc, si vous essayez modifier les accessoires ici, disons Donc, si j'essaie de dire que le nom d'accessoires ici est égal à test, par exemple, si j' essaie de l'enregistrer, le résultat disparaîtra Et si vous vous dirigez vers la console d'ici, si vous faites défiler la page vers le haut, vous pouvez voir ne pouvez pas attribuer à une propriété en lecture seule, et vous essayez de la modifier. C'est ce qu'il essaie de dire. D'accord ? Si vous supprimez cette ligne, l'erreur disparaîtra. Si je l'enregistre, vous pouvez voir la sortie est là et que l'erreur a disparu. Tu peux voir, non ? Donc oui, les accessoires sont immuables. Ils sont en lecture seule. Ils ne peuvent pas être modifiés par les composants enfants, et ils dépendent du composant parent pour leur transmettre les données, n'est-ce pas ? J'espère donc que cela vous sera utile et j' espère que vous avez pu suivre. 20. Plusieurs accessoires ?: J'ai donc cet exemple dans lequel nous affichons la carte de profil en passant le nom comme accessoire ici, et nous affichons le nom comme celui-ci sur et nous affichons la carte de profil, et nous voyons le nom être rendu ici sur l'interface Maintenant, il peut sembler, en regardant cet exemple, que nous ne transmettons qu'un seul accessoire ici Alors, qu'est-ce qu'une possibilité ? D'accord ? Je voudrais donc vous montrer et vous dire que vous pouvez également transmettre plusieurs accessoires Je peux donc dire 23 et je peux dire que H est 42, par exemple. D'accord ? Je vous présente donc un autre accessoire, que je peux exposer ici D'accord ? Donc je peux dire H et je peux dire H ici. OK. Quelque chose comme ça. Et si je viens ici, vous pourrez voir Alice et John, accord, avec leurs H respectifs. D'accord, c'est donc tout à fait possible dans le cas où vous pouvez transmettre plusieurs accessoires à un composant enfant Maintenant, dans notre exemple, le H que nous transmettons ici est transmis sous forme de chaîne. Il y aura un scénario dans lequel vous souhaiterez peut-être transmettre les données sous forme d'entier ou de nombre. Donc, dans ce cas vous pouvez dire num ici, je vais passer un autre paramètre. Je vais dire « non », deux par ici. D'accord ? Ou laissez-moi le passer sous forme de ficelle, d'accord ? Je vais passer à un endroit à ficelle et à un autre par ici de cette façon. OK. Voici donc comment vous pouvez passer en tant que numéro. OK. Il ne s'agit pas d'une chaîne. OK. Et ici, laisse-moi essayer quelque chose. Je peux dire que const sum est égal aux accessoires enseignés, num plus D'accord ? Et je vais afficher les données ici. D'accord ? Donc ici, vous pouvez dire que num c'est pour que je n'en ai pas besoin Je vais voir la somme ici. D'accord ? Maintenant, si vous venez ici, vous pouvez voir que num est 21 ici, ce qui signifie que deux plus un, il est devenu 21 parce qu'il a été transmis sous forme de chaîne ici dans ce cas. D'accord ? Dans le deuxième exemple, nous l'avons transmis de cette façon, et ici il est affiché sous forme de trois, ce qui signifie qu'il est transmis sous forme d'entier, d'accord ? J'espère donc que cela a du sens, comment vous pouvez travailler avec des données et transmettre plusieurs accessoires dans un seul composant accord ? J'espère que cela vous a été utile. 21. Gérer les valeurs booléennes et les types de matériel: Voyons maintenant comment vous pouvez utiliser Pollans lorsque vous travaillez avec des accessoires Donc, dans notre exemple, nous avons une carte de profil, que nous affichons. Je passe aux chaînes et aux nombres, Allr ? Et j'affiche ce nombre de cette façon à l' aide de calculs. Je vais donc supprimer cet affichage pour le numéro. Nous n'en avons pas besoin. OK. Et je vais aussi me débarrasser de Num ici. OK. Parlons maintenant du booléen. Supposons que je veuille transmettre un accessoire booléen, je dirais qu'il s'agit d'un membre ici OK, et je vais dire que c'est vrai ici. OK. Et je vais également transmettre une chose similaire ici. Oups, je dois fermer ça ici. OK. Je vais transmettre son membre, et je dirais qu'il tombe ici. Quelque chose comme ça. OK. Maintenant, je passe un booléen ici, mais celui-ci est transmis sous forme OK. Laisse-moi te le montrer. Donc, si je fais double emploi, si je dis « est membre ici », je suis désolée. Est membre ? OK. Quelque chose comme cet accessoire de départ est un mémo OK. Maintenant, si vous voyez ici, vrai et faux, cela est imprimé sous forme de chaîne E. OK. Maintenant, pour le passer en tant que booléen E ici, je dois, par exemple, supprimer ces crochets ici Désolé, ces virgules inversées, et je dois ajouter les Cobras. OK. Il en va de même pour les nombres entiers. Maintenant, si je sauvegarde ceci et si je viens ici, vous verrez que vous ne pouvez pas voir les valeurs booléennes OK ? Alors, quel est le but de transmettre les valeurs booléennes ? Les valeurs booléennes sont donc utilisées pour la prise de décision. OK ? Supposons donc que vous souhaitiez présenter ou afficher un message selon que l' utilisateur est membre ou non. Vous pouvez donc utiliser ce booléen est membre ici et vous pouvez l'afficher OK, laisse-moi te montrer ça. Je peux donc parler de statut ici. État. Et si vous regardez le statut actuel, il n'y a rien car il s'agit d'une valeur booléenne Je peux donc dire si je peux réellement utiliser l' opérateur ternaire ici OK ? Je peux donc dire que Props en est membre Alors si c'est vrai, alors je dirais membre actif ou bien, je dirais devinez. Quelque chose comme ça. Je l'enregistre et vous pouvez voir le membre actif et l'invité. Alice est donc un membre actif parce que nous sommes passés pour Alice ici. Tu peux voir qu'Alice était vraie. Et John n'est pas un membre actif, donc vous pouvez voir un invité ici parce que nous l'avons faussement transmis. D'accord, si vous voulez que cela soit également vrai, vous pouvez transmettre le vrai comme ça. Oups. Je vais donc le sélectionner, enregistrer et vous pourrez voir le membre actif. OK. En un mot, vous allez voir Johns deviner OK. Voici donc comment vous pouvez utiliser les valeurs booléennes dans les accessoires Donc, les accessoires sauf le membre booléen prop, d' accord, vous permettent de gérer l'état à l'intérieur du composant Donc, si vous souhaitez ajouter une sorte d' affichage conditionnel ou quelque chose comme ça, vous pouvez utiliser des accessoires booléens affichage conditionnel ou quelque chose comme ça, vous pouvez utiliser des accessoires booléens, n'est-ce pas ? Et comment le passez-vous ? Vous le transmettez en une paire de passes frisées et non entre virgules comme C'est une façon de passer une chaîne ici. C'est bon. J'espère donc que cela vous sera utile. 22. Déstructurer les accessoires: Commençons donc par parler de la déstructuration des accessoires. Voici donc un exemple dans lequel j'ai ce composant d' application, qui utilise deux fois la carte de profil, n'est-ce pas ? Vous pouvez voir qu'il affiche la carte de profil deux fois, et qu'il transmet ces données ici, et que ces données sont transmises sous forme d'accessoires, et ce composant de la carte de profil utilise ces données À l'aide de la notation par points. Vous pouvez donc voir comment il l'utilise. Maintenant, ce que je veux dire par notation par points, c'est cette donnée que vous transmettez d'ici, nom, H est membre. Ces attributs sont transmis sous forme d'objet ici. D'accord ? Ainsi, les accessoires deviennent des objets, et vous pouvez accéder à tout ce a été transmis à l'aide de la notation par points, qui signifie utiliser ce point ici vrai, vous pouvez donc voir le nom du point d' accessoire, le point h et le membre du point d' accessoire. Cette façon d'accéder aux choses est connue sous le nom de notation par points, et nous pouvons utiliser la notation par points ici car les accessoires sont des objets D'accord ? C'est dans un objet JavaScript, non ? Maintenant, en JavaScript, il est courant d'utiliser la déstructuration, n'est-ce pas ? Et lorsque vous utilisez des accessoires dans React, déstructuration est couramment utilisée pour rendre le code propre et plus lisible. Permettez-moi de vous donner un exemple. Tout d'abord, je vais simplement vous donner un aperçu de ce qu'est la déstructuration Alors pensez-y de cette façon, d'accord ? Vous avez un objet JavaScript ici. D'accord ? Il ne s'agit pas de réagir. Il s'agit d'un simple script Java que j'écris ici. OK, je dis le nom, John. D'accord. Et il faut qu'il y ait deux choses dedans. Il a un nom et chacun. Il y en a donc 30 chacun ici. D'accord ? Maintenant, l'un des moyens d' extraire les données de cet objet est de le déballer Vous pouvez dire nom, personne, tension, nom ici. C'est un moyen. D'accord. Donc c'est sans déstructuration, d'accord ? Et en utilisant la notation par points, non ? C'est ce que tu utilises, d'accord ? Vous pouvez dire g ici et vous pouvez dire personne point age. C'est une façon de faire les choses, non ? Une autre façon de procéder consiste à utiliser la structuration T, la déstructuration Comment le ferais-tu ? Donc tu peux dire « const », d'accord ? Tu peux dire ton nom, viens ici. D'accord ? Et tu peux lui assigner une personne. Oups. Cela décompresserait donc toutes les valeurs qui existent dans l'objet person et l' attribuerait à ces deux variables Maintenant, je reçois une erreur parce que c'est redondant, n'est-ce pas ? Le nom et l'âge sont déjà créés, donc je vais juste le commenter , d'accord pour que nous ne voyions pas l'erreur. Mais vous avez l'impression qu'il s'agit d'une restructuration dans laquelle vous décompactez une personne dans son nom et dans chacun d'eux, n'est-ce pas ? Et quel est le nom et l'âge ? Le nom et chacun sont des attributs que vous pouvez voir ici dans l' objet ici. Nous avons donc décompressé les propriétés qui existaient dans cet objet Vous pouvez voir qu'il a été déballé. C'est ce que l'on appelle maintenant la déstructuration. C'est une meilleure syntaxe par rapport à celle-ci. D'accord ? C'est également faisable Vous pouvez le faire, mais ce n' est pas très lisible. C'est un processus un peu long et fastidieux, non ? Maintenant, j'ai dit que c'était transmis en tant qu'objet, d'accord ? Et voici toutes les propriétés d'ici. Donc, ici, si vous voyez que vous avez des accessoires, vous avez le nom des accessoires, le point H. Donc, le nom, l'âge, les membres ne sont Vous pouvez donc également appliquer le modèle de structuration en D similaire ici D'accord. Et pour ce faire , vous pouvez vous en débarrasser ici. D'accord ? Nous pouvons utiliser la même syntaxe, non ? Vous avez besoin de ces bretelles bouclées, donc je vais les copier, les coller ici, et ici je peux avoir le nom H et j'en ai un autre membre, quelque chose comme ça Maintenant, au moment où je fais cela, je n'ai pas besoin d'accéder à tous ces attributs ou à toutes ces propriétés, pas aux attributs, à toutes ces propriétés en utilisant la notation par points. Je peux donc me débarrasser du nom du point, du point H, et tot est ici. D'accord. Je vais enregistrer ceci et cela peut également être enregistré, et vous verrez qu'il n'y a aucun changement dans la sortie. Il n'y aura pas non plus d'erreur. D'accord. Tout va bien, non ? donc ce qu'est la déstructuration de JavaScript, et je pense que vous connaissez la déstructuration de JavaScript Mais ce n'était qu'un rappel. J'espère donc que vous comprenez ce que c'est et comment cela est utilisé pour la déstructuration des accessoires Maintenant, n'oubliez pas que la déstructuration en JavaScript est un moyen pratique d' extraire des valeurs de tableaux ou d'objets en variables, Il est très fréquemment utilisé et le terme utilisé est la déstructuration qui permet de déballer Le terme déballage est donc utilisé partout, n' est-ce pas ? Donc ici, ce que nous faisons, c'est déballer les accessoires, Nous sommes en train de déballer les accessoires dans les variables individuelles ici , Et nous utilisons ces variables à l'intérieur du composant, n'est-ce pas ? Donc, ici, les variables sont directement utilisées, et c'est beaucoup plus lisible que d'utiliser la notation tot, n'est-ce pas ? Ainsi, lorsque vous travaillez avec des composants React, ce type de syntaxe, vous verrez beaucoup de choses dans lesquelles les attributs sont transmis de cette manière. Les propriétés sont transmises de cette manière, et ici elles sont déstructurées de cette manière. Alors ne vous y trompez pas. Il s'agit d'une déstructuration d'objets normale avec un script Java. Donc Javascript, le concept de JavaScript, est utilisé ici, n'est-ce pas ? J'espère donc que cela vous sera utile et j'espère que vous avez pu me suivre. 23. Valider les accessoires avec PropTypes dans React: Commençons par parler des validations d' accessoires et de la façon dont elles peuvent être utilisées pour valider les propriétés que vous transmettez, J'ai donc ce composant ici, une application, qui utilise deux fois la carte de profil, et nous transmettons quelques accessoires ici, vous pouvez le voir, et cet accessoire est en train d'être déstructuré par nos soins, et nous utilisons les données déstructurées contenues dans le composé ici et nous utilisons les données déstructurées contenues dans le composé données déstructurées contenues dans le , n'est-ce pas ? Maintenant, laissez-moi vous donner un scénario. Ici, nous transmettons H et H sous forme de chaîne, n'est-ce pas ? Maintenant, il n'y a aucune sorte de validation en tant que telle, d'accord ? Aucune sorte de validation que nous effectuons actuellement ne peut nous aider à mettre en évidence ce point fort auprès d'un développeur ou de toute personne utilisant ce composant en particulier qui, hé, g est censé être un nombre et non une chaîne, n'est-ce pas ? Donc, pour le moment, nous ne recevons aucune sorte d'erreur. Nous sommes tous bons, mais il y aura scénarios dans lesquels vous aurez conçu un composant et vous voudriez que quiconque travaille sur ce composant ou utilise ce composant dans son fichier transmette les données d'une certaine manière, n'est-ce pas ? Parce que normalement, dans une équipe, vous travaillez sur un composant, vous écrivez un composant, et ce composant est utilisé par certain nombre de développeurs. Comment communiquez-vous cela ? C'est donc là qu'intervient la validation des accessoires. Maintenant, à l'aide des types d' accessoires, le type d'accessoire est un outil qui peut être utilisé pour valider les accessoires transmis ou reçus par OK ? Ainsi, à l'aide de types d'accessoires, vous pouvez détecter les carlins dès le début du développement lorsque les données sont transmises, assurant ainsi que le type de données actuel est transmis au composant Et si un composant reçoit les accessoires qui ne correspondent pas aux types attendus, React émettra un avertissement dans la console en mode développement Hein ? C'est donc quelque chose à savoir, et voyons comment vous pouvez ajouter des validations. Donc, ce que je ferais, c'est d' abord, nous devrions utiliser une instruction d'entrée, donc je vais dire input, prop types OK ? J'écris ceci au point Qx de la carte de profil, et je dirais les types d'accessoires OK, donc je fais cette déclaration d'entrée en haut. Maintenant, ce que je ferais, c'est ici, j'écrirais la validation dont j'ai besoin. Donc, pour ajouter la validation, ce que nous ferions, c'est ici, nous dirions carte de profil. OK, voici le nom du composant. Nous dirions tot, je dirais types d'accessoires ou quelque chose comme ça OK. Ensuite, je vais ouvrir une paire de louanges frisées OK, aligne ça avec un point-virgule. Et ici, je vais écrire la validation , comme je veux. Donc je peux dire le nom. Pour le nom, je dois dire prop types, tot string. OK. C'en est donc une. OK. Je peux dire que pour chaque type d'accessoire, je pense, disons un numéro Nous voulons que ce soit un numéro, accord, donc je vais dire numéro. OK. Et pour un membre, OK, je vais dire les types d'accessoires, et je vais passer le point Bool ici OK. Et je vais tomber dans le coma. OK ? Je n'ai pas encore enregistré ce fichier, mais avant de le sauvegarder, je tiens à vous montrer que nous sommes en train de transmettre une chaîne de caractères et que nous ne recevons aucune sorte d'erreur, n'est-ce pas ? Donc, ici, si vous voyez dans app.j6, nous passons une chaîne Aucune erreur ne s'affiche sur la console. Dès que je l'enregistre et si je viens ici, vous verrez ces avertissements ici. Type d'accessoire défaillant, chaîne d'âge de type accessoire non valide d'âge de type accessoire appliquée à la carte de profil, numéro attendu OK ? Vous ne recevez donc ce type d' avertissements en mode développement que lorsque vous utilisez la validation des types d'accessoires OK ? Maintenant, ce qui se passera, c'est si un développeur utilise un composant de carte de profil. Supposons que le composant de la carte de profil soit développé par vous et moi en tant que développeur, que je suis votre coéquipier, que j'utilise cette carte de profil et que je réussis H S 23. C'est une chaîne. Cela commencerait simplement à envoyer des avertissements à la console et au développeur. Je suis le développeur. Dans ce cas, je saurais que je ne suis pas censé le transmettre sous forme de chaîne, mais plutôt sous forme de nombre. OK ? Maintenant, je peux également changer cela en numéro ici, et l'avertissement disparaîtra. Je peux donc dire 23. Si je l'enregistre, je reçois toujours un message d'erreur, d'accord, parce que je n'ai changé qu' à un seul endroit, n'est-ce pas ? Je dois donc également apporter un changement ici. Il suffit de le sauvegarder. OK. Et maintenant, vous verrez qu'il n' y a pas d'erreur en tant que telle. OK ? Tout est donc réglé. Maintenant, une dernière chose dont je voudrais parler , c'est que si je ne deviens pas membre, voyons ce qui se passera, d'accord ? Donc, si je ne suis pas membre, vous verrez qu'il n'y a pas de problème en tant que tel, n'est-ce pas ? Vous pouvez donc voir qu'il n'y a aucun problème, n'est-ce pas ? Est-ce que je reçois une erreur que je suis censé transmettre à son membre ? Non, non ? Vous pouvez donc également ajouter une validation pour cela. Donc, si un quelconque accessoire est obligatoire, d'accord ? Vous pouvez ajouter n'importe quel type de validation. Demander à l'utilisateur de transmettre la valeur de cet accessoire en particulier OK ? Donc, ici, Boll, je peux dire « tout », et ici je peux dire que c'est nécessaire. Tu peux voir. Si je le sauvegarde, si je viens ici, vous verrez que l'accessoire «   membre » est marqué comme obligatoire sur la carte de profil, mais que sa valeur n'est pas définie, n'est-ce pas Donc, plus tôt, je ne transmettais cet accessoire et je n'ai reçu aucune erreur, mais maintenant je dois le transmettre obligatoirement. D'accord, c'est Il n'y a aucune issue. Et si je l'enregistre et si je fais une actualisation, vous verrez l'erreur disparaître. C'est bon. J'espère donc que le fonctionnement de la validation des accessoires est clair fonctionnement de la validation des accessoires Maintenant, n'oubliez pas que cela sera affiché. Ce seront les erreurs que vous voyez s'afficheront en mode développement, et cela sera affiché sous forme d'avertissements, d'accord, sur la console du navigateur, sur la console du navigateur, ce qui aidera les développeurs à corriger le problème et à le résoudre, n'est-ce pas C'est donc à cela que servent les types d'accessoires, d'accord ? Cela signifie donc que vous voulez une chaîne. Cela signifie que vous voulez un numéro. Cela signifie que vous voulez un booléen, aussi bien que nécessaire, Lui et son nom sont facultatifs, mais le membre est obligatoire, d'accord ? Vous pouvez également exiger des T ici en le transmettant ici. Si l'ajout est obligatoire, cela signifie que H est également obligatoire et que ce n'est pas facultatif. C'est bon. Ainsi, en fonction de vos besoins, vous pouvez ajouter ce type de validations et faire avancer les choses accord ? J'espère que vous avez pu me suivre, et j'espère que cela vous a été utile. 24. Utiliser des accessoires avec des tableaux: Commençons donc par parler de la façon dont vous pouvez utiliser des tableaux comme accessoires ici. Nous avons donc cette application composante, qui utilise deux fois la carte de profil ici. Et j'ai cette carte de profil, qui restructure les accessoires que je reçois J'affiche les accessoires et j'ai une certaine validation pour les accessoires ici. OK ? Maintenant, ce que je vais faire, c'est dire que je souhaite afficher les loisirs ici, et les loisirs peuvent être multiples. Donc, ce que je voudrais faire, c'est que mes loisirs soient stockés sous forme de tableaux ici Disons que j'ai un hobby, donc je peux dire « escroquerie ». OK. Je peux dire hobby 1, et je peux avoir un E de ce genre. OK, quelque chose comme ça, et je dirais lire, et je vais juste avoir deux loisirs pour le moment : cuisiner. OK. Je vais le transmettre. OK. Et ce que je peux faire ici, c'est ajouter un accessoire ici, loisirs, et je peux transmettre ça Je peux dire hobby. Un. D'accord, donc c' est en train d'être adopté maintenant, et ce que je dois faire, c'est m' en servir ici. OK ? Je peux donc parler de hobby ici. OK. Et oui, j'ai mon hobby ici. Ok, les loisirs, ça ne sera pas un hobby. Ce seront des loisirs parce que vous transmettez comme des loisirs ici. OK ? J'ai donc des loisirs. Maintenant, ce que nous devons faire, c'est afficher nos loisirs, n'est-ce pas ? Donc, tout d'abord, je vais venir ici. Je dirais trois ou trois ans, des loisirs. OK. Et ici, ce que je vais faire, c'est dire que je vais ajouter une liste non ordonnée, L, puis ici, je vais écrire un script Ja Je vais dire carte des loisirs. Je vais donc utiliser la méthode cartographique ici. OK, carte à points des loisirs, et je vais dire hobby. Je vais avoir deux paramètres ici, d'accord. Donc, juste au cas où vous ne sauriez pas ce que je fais, j'utilise la carte ici et je me sers de la carte pour itérer essentiellement sur chaque élément du tableau des loisirs Les loisirs sont donc une gamme de loisirs que j'ai reçue ici. OK, je le transmets sous forme de tableau. Vous pouvez le voir ici, non ? C'est un tableau. OK ? Maintenant, je dois l' itérer et l'afficher à l'utilisateur Donc des tableaux en JavaScript. C'est donc du JavaScript et les tableaux en JavaScript ont cette incroyable méthode appelée map, que vous pouvez utiliser, n'est-ce pas ? J'utilise donc Hobbies Dot Map. Maintenant, la carte fait des annonces sur chaque élément du tableau des loisirs ou du tableau avec lequel vous l' utilisez. Donc, pour le moment, la gamme en question concerne les loisirs. Je dis qu'il évalue chaque élément du tableau des loisirs, et ce que vous faites, c'est pour chaque élément du tableau, exécutez cette fonction de flèche. J'ai donc cette fonction de flèche que vous voyez, donc je vais simplement la supprimer. OK, c'est une carte. OK. Maintenant, je colle cette fonction de flèche. Tu peux voir ? OK. C'est la fonction de flèche que j'utilise, et c'est cette fonction de flèche qui sera appliquée ou exécutée, et elle retournera une nouvelle valeur. OK ? Cela prend donc en compte deux paramètres, cette fonction flèche, hobby et index. Désormais, le hobby est l'élément individuel ou actuel du tableau des loisirs à chaque itération. Il représente donc l' élément actuel à chaque itération. Par exemple, si notre liste de loisirs est la lecture et la cuisine, le passe-temps sera d' abord la lecture, puis la cuisine. Et l'index correspondant sera transmis ici. OK ? Donc, ce que je ferais c'est que je retournerais quelque chose ici. Donc, tout ce que vous ajoutez ici est renvoyé. Je vais donc créer un élément LI ici. OK. Et je dirais que key est égal à, je vais ajouter un index ici et un hobby sera ajouté ici, quelque chose comme ça. Comme ça. OK ? Nous avons donc ajouté cette fonction ici, et cette fonction est essentiellement exécutée pour chaque élément du tableau. OK ? Il comporte deux paramètres. L'un est l'élément actuel du tableau des loisirs à chaque itération. C'est ce qu'on appelle un hobby. Et puis nous avons l'index. C'est l'index de l' élément actuel dans le tableau, d'accord ? Et ce qui se passe, c'est qu'une fois cette fonction exécutée, une valeur est renvoyée, et la valeur renvoyée dans ce cas est ce markdown, accord, ou ce code JSX que nous renvoyons ici. Maintenant que c'est ce qui se passe , c'est LI, d'accord ? C'est donc une liste qui est en cours de construction. Il représente un seul élément de liste. OK. Et j'ai cette clé ici. OK. Maintenant, un accessoire clé est ajouté ici avec la valeur de l'index Donc, pour le premier élément, la clé sera une. Pour le deuxième élément, la clé sera deux. Désolé, pour le premier élément, la clé sera zéro. OK ? Et pour le deuxième élément, clé sera un et ainsi de suite, car les index commencent par zéro, bien sûr, n'est-ce pas ? Maintenant, pourquoi ajoutons-nous cette clé ici ? OK ? L'ajout de cette clé est donc l'une des meilleures pratiques lorsque vous travaillez avec des listes dans React, n'est-ce pas ? Ou chaque fois que vous affichez des tableaux dans React. C'est donc très important car l'utilisation de la clé ici est faite pour gérer efficacement le rendu de la liste, d' accord ? Et cette clé permet de réagir, de suivre chaque élément de la liste et de ne mettre à jour que ceux qui changent et qui nécessitent des modifications lorsque la liste change. Donc, s'il y a des modifications dans la liste ou le tableau ici, d'accord, sur la base de cette valeur clé, il effectuera une mise à jour à chaud, d' accord, parce qu'il doit effectuer une mise à jour, n'est-ce pas ? En cas de modification de la valeur, elle ne se recharge pas instantanément Ainsi, en fonction de la valeur de la clé, en fonction de la manière dont cette clé est attribuée et rendue sur l'interface, le rechargement à chaud sera effectué Donc, du point de vue de l' optimisation, React a besoin de cette clé, et il est important inclure chaque fois que vous affichez un tableau ou une liste, devrais-je dire. OK, c'est donc ce que nous avons fait. Et si vous venez ici, d'accord, nous ne verrons aucune sorte de résultat. Pourquoi ? Pourquoi donc ? OK. Donc, d'accord, je reçois une erreur ici 11, d'accord ? Et ne peut pas lire les propriétés de undefined. C'est bon. C'est parce que je ne parle que de 11 composants et pas de l'autre. Donc, si je sauvegarde ceci, je devrais facilement voir le résultat ici Vous pouvez voir le résultat que je vois. OK. Maintenant, je ne vois pas de loisirs être montrés ici. Les loisirs ne sont pas montrés. D'accord, les loisirs ne sont pas transformés, en fait, d'accord ? Voyons donc pourquoi le hobby n' est pas rendu. Je pense donc que j'ai le problème ici. Nous sommes juste en train de fabriquer ce LI, mais nous ne le retournerons pas Alors, non ? Nous devons ajouter une déclaration de retour ici. OK. Et dès que nous ajouterons le relevé de retour, laissez-moi le sauvegarder ici. Je vais également le fermer par un point-virgule, OK, et je vais Et si vous venez ici, vous verrez des cours lecture et de cuisine. OK. Ignorez l'interface. D'accord. Ce n'est pas très joli, mais j'espère être capable de communiquer les concepts que nous apprenons, n'est-ce pas ? Ici, vous pouvez voir Hobby, Hobby One être adopté. OK. Ce que vous pouvez faire, c'est que je vais directement couper au lieu d' utiliser une variable. Je vais juste m' en débarrasser ici. OK. Et ici, ce que je peux faire, c'est simplement coller le hobby. OK ? Ici, je peux lire et faire de la randonnée. OK, et nager. Donc, le premier lit, la cuisine, l'autre la natation et la randonnée. Et si vous voyez par ici, lisez , cuisinez, nagez et faites de la randonnée. OK ? Il est donc correctement affiché. C'est absolument génial ici. OK ? Maintenant, ce que nous faisons, c'est transmettre le tableau de chaînes ici , n'est-ce pas ? Le tableau de chaînes est en cours de transmission. Vous pouvez maintenant ajouter une sorte de validation ici si vous le souhaitez. Donc, ici, je vais passer aux types d'accessoires. Et je peux ajouter une validation. Disons que je souhaite me consacrer uniquement à la gamme de cordes. Je ne veux pas qu'un autre type se consacre à ses loisirs. OK ? Donc, ce que je peux faire, c'est parler de mes loisirs ici. OK ? Colin, je dirais les types d'accessoires, quelque chose comme ça Tout un tas d'ici. Et ici, je peux dire que types d' accessoires sont des points, je peux dire des chaînes, quelque chose comme ça Il s'agit donc d'une syntaxe que vous devez suivre. OK. Nous voyons un éventail de types d'accessoires et nous constatons que cela devrait être une chaîne de caractères, d'accord ? Et cela garantit que le hobby est toujours une panoplie de cordes. Donc, si je sauvegarde ceci et si je viens ici, d' accord, si je suis frais, vous verrez qu'il n'y a pas d'erreur en tant que telle, d'accord ? Mais si je remplace cela numéro, et si je viens ici, vous pouvez voir qu' un type d'accessoire non valide est fourni un type de numéro Vous verrez le rendu se produire ici. Rien n'arrête le rendu, mais un avertissement est émis, d'accord ? C'est là l'avantage de la validation que nous effectuons. accord ? Donc, oui, j'espère que c'est utile, et j'espère que vous avez pu suivre comment vous pouvez utiliser des tableaux avec des accessoires dans 25. Préparer les rappels: Il est maintenant temps de commencer à parler de callbacks. Maintenant, que sont les rappels ? Les rappels sont des fonctions qui sont transmises en tant qu'arguments à d'autres fonctions et exécutées une fois qu'une tâche particulière est terminée Maintenant, cette tâche particulière peut être une sorte d'opération de rendu ou une sorte d' opération asynchrone comme un appel d'API ou quelque chose comme ça OK ? Je vais donc vous montrer comment nous pouvons utiliser les rappels dans cet exemple Donc voilà, ce que j'ai fait, c'est que j'ai ce, euh, composant d'application que vous voyez ici. OK ? Il s'agit de l' ensemble du composant de l'application, qui utilise la carte de profil ici. OK ? Et la carte de profil est le composant ici, d'accord ? Il affiche certaines données, certains accessoires qu'il obtient du composant parent Et j'ai ajouté du CSS juste pour embellir cette interface ici Vous verrez donc une interface un peu belle, une interface décente. OK, présentable. Je ne dirais pas que c'est trop beau, mais je dirais que c'est présentable. C'est bon. Et si vous venez ici, c'est le CSS que j'ai ajouté pour la même chose. Il se trouve dans le fichier CSS à points de l'application. OK ? C'est un CSS très simple, assez simple. Et j'ai fait le travail en ajoutant quelques classes également, comme App Contain ici et la carte de profil ici. C'est vrai. Passons maintenant au sujet des rappels, d'accord ? Supposons que je veuille ajouter un écouteur sur les clics sur les loisirs, et cet écouteur sur clic affichera une alerte, d'accord ? Et je veux savoir sur quel hobby on a cliqué. Je souhaite le montrer à l'utilisateur. OK ? La fonctionnalité est donc simple. D'accord, cela pourrait être plus complexe, mais je vais m'en tenir à la fonctionnalité simple. C'est bon. Maintenant, ce que je ferais, c'est définir une fonction, d'accord, tout d' abord, dans l'application , je dirais, ayons une fonction. Donc ici, vous pouvez dire, const handle, Hobby, cliquez ici OK. Et je vais avoir un paramètre. OK, par ici. Je vais utiliser la fonction flèche, et je vais dire alerte. OK, quelque chose comme ça. Et ici, je dirais que vous avez cliqué sur Je dirais un passe-temps plus grand, Hobby, quelque chose comme ça. OK ? C'est donc une fonction que j'ai créée, et je veux qu'elle soit déclenchée chaque fois que l'on clique sur Hobby OK ? De plus, je vais simplement aligner ça. C'est donc devenu assez long, je dirais. OK. Il disparaît de l'écran, donc je vais simplement mieux aligner cet animal de compagnie. OK ? Vous pouvez donc le voir ici. OK. Je vais trouver le nom ici. Chacun est un passe-temps pour les membres. OK, donc c'est maintenant lisible et ça ne sort pas de l'écran maintenant. C'est bon. Alors maintenant, ce que je dois faire, c'est ce que je peux faire, je peux transmettre cette fonction particulière en tant que rappel à ce composant particulier OK ? Comment avec l' aide d'accessoires ? C'est bon. Je peux donc venir ici, d'accord, appuyer sur Entrée et dire sur Hobby, cliquez, c'est le nom de l'accessoire Je peux avoir cette syntaxe JavaScript, et je peux dire handle hobby click, quelque chose comme ça. OK. Et je peux aussi le faire passer pour ça. Voilà, quelque chose comme ça. OK ? Donc oui, j'ai réussi les deux pour les deux composants que je rends, les deux cartes de profil, je les transmets en tant qu'accessoire Maintenant, sur la carte de profil, ce que je dois faire, c'est m'intéresser à Hobbie, cliquez ici OK, quelque chose comme ça. OK ? Maintenant, ce que je vais faire ici est là, je dois ajouter un écouteur dans l'élément LI lorsque nous rendons l'élément LI, n'est-ce pas Donc, ce que je peux faire ici, c'est qu'après une touche comme celle-ci, je peux dire en cliquant ici, et je peux avoir l'équivalent de. OK. Et je vais ajouter ceci et j'ajouterai la fonction flèche, et je dirai que sur le hobby, cliquez ici, et je transmettrai le hobby que j'ai, d'accord ? J'espère donc que cela a du sens. OK ? Donc, ce que nous faisons, c'est ajouter un « L » en cliquant ici. Nous avons accès au hobby. Donc, à l'aide de cette carte, cette carte est en train d'itérer sur le réseau Hobbie, Et pour chaque itération, ces deux éléments ont le hobby actuel et l'index Je vous transmets donc ce hobby ici. OK, chaque fois que l' événement Click est déclenché, j'appelle « On Hobbie Click Qu'est-ce qu'on Hobbie Click ? vient en tant qu'accessoire ici. Et qu'est-ce qui vous servira d'accessoire ici ? Ce truc arrive . Cette fonction. OK. Et ce qui va se passer, c'est ce que nous transmettons comme paramètre ici. OK. Permettez-moi d'en parler également à la nouvelle ligne, quelque chose comme ça. OK. Donc ce que vous êtes en train de prendre, ce que vous transmettez comme paramètre, votre hobby, sera transmis ici. OK, passez à cette fonction, et cette alerte sera déclenchée. OK ? Voyons cela en action. Je vais enregistrer ce code. Je vais venir ici. Oups. Vous voyez donc nager au clic, faire de la randonnée au clic. Il y a un problème de rendu. Donc, par ici, si vous voyez Click Hobby. Oups. Nous avons fait une erreur, donc je vais juste y mettre fin. OK. Je vais juste couper ça. OK. Et, euh, j'ai accidentellement ajouté ceci au mauvais endroit. OK, donc ça devrait être ici. OK ? Oui, quelque chose comme ça. Maintenant, permettez-moi de passer à une autre ligne. Ce devrait être après la touche, puis cette balise de fermeture ici pour le HTML, et ensuite nous allons afficher l'IA comme j'espère que cela a du sens maintenant, d'accord ? Donc, comment cela a fonctionné, c'est que le tag LI a deux attributs. L'un est la clé, l'autre est un clic, vous pouvez le voir. Ensuite, nous fermons ce tag ici. Nous entrons dans le hobby, puis nous fermons le tag LI. OK. J'espère que cela a du sens. Et si tu viens ici, je le ferai fraîchement. Tu as cliqué sur Cuisiner, d'accord ? Vous avez cliqué sur Randonnée. Tu as cliqué sur Natation. Vous avez cliqué sur la lecture. Vous pouvez donc voir comment fonctionne le rappel, d'accord ? Maintenant, cela peut être le cas ici, nous sommes passés à un composant. Nous l'avons transmis comme accessoire au composant. OK ? Vous pouvez le transmettre à tous les rappels normalement utilisés pour être déclenchés Ils sont censés être déclenchés lorsqu' opération asynchrone ou tout autre type de rendu est terminé OK ? Donc, dans ce genre de scénarios, vous pouvez utiliser le rappel. Supposons donc que vous ayez un appel d'API, vous pouvez transmettre cette fonction en tant que rappel Et une fois l'appel d'API effectué, en fonction d'une certaine opération ou d'un certain événement, vous pouvez déclencher le rappel, comme nous le faisons ici Hein ? Il s'agit donc la fonction définie dans le composant parent déclenchée à partir d'un élément du composant enfant à l'aide de Lissner en un clic C'est bon. J' espère donc que cela a été clair et j'espère que vous serez en mesure de suivre cette évolution. 26. Les accessoires et la syntaxe des étalages: Voyons comment vous pouvez utiliser l'opérateur de propagation lorsque vous travaillez avec React et que vous transmettez des accessoires ici OK ? Maintenant, l'opérateur de propagation est un concept JavaScript, d'accord ? Et nous verrons comment nous pouvons l'appliquer ici. Maintenant, ce qui se passe ici, c'est que j' ai ce composant d'application, d'accord, qui a créé cette fonction, d'accord, cette fonction, gère le clic amateur dans le composant de l'application, et je transmets ce clic de poignée avec d' autres accessoires ici à la carte de profil, et je suis en train de faire le rendu de la carte de profil ici, d'accord ? Et la carte de profil est une carte très simple qui affiche ces informations dans l'interface utilisateur accord ? Il a également quelques validations. Donc, ce que je vais faire, c'est transmettre les accessoires de la carte de profil avec l' aide de l' opérateur de spread, d'accord Et ce que je vais faire d'abord, c'est créer un objet avec toutes ces valeurs. Maintenant, ces accessoires sont transmis à la carte de profil, et ce sont des accessoires d'usages différents, Ce sont donc des propriétés destinées à représenter Alice et John, n'est-ce pas ? Donc, ce que nous pouvons faire, c'est convertir ces accessoires en objets ici. OK ? Donc ce que je ferais, c'est ici, je dirais const, je dirais Ale profile OK, je dirais le profil d'Alice ici, et je les ajouterais sous forme d'objets ici. Oh, désolée, en ce qui concerne les propriétés. OK. Alors voilà, je construis un objet, d' accord, je n'ai pas besoin de cette orthèse bouclée OK. Et voilà, alors j'aurai, euh, ce membre, d'accord, quelque chose comme ça. Je n'ai pas besoin de True, quelque chose comme ça. J'aurai des loisirs. Et quand on se débarrasse de ces bretelles bouclées, on en avait besoin chez GSX, mais pas ici, d'accord ? Je vais avoir une virgule Et, euh, je vais ajouter ceci. OK. Et oui, je me trompe toujours, je sais. Et la raison en est que ce devraient être paires clé-valeur et non égales à, d'accord ? Alors je vais Oups. Je vais Oups. Je déconne avec le clavier. OK. Je vais donc simplement copier ceci. OK. Je vais juste le copier et le coller. Oups. Donc oui, quelque chose comme ça. OK. Et ouais. Voici donc à quoi ressemble le profil d'Alice. OK ? Nous transmettons donc les données d' Alice ici. OK ? Nous devons également faire de même pour John. Je vais donc couper ça. OK, arrête ça ici. Je vais venir ici. OK. C'est fait. Je dirais const, John, profile OK. Et voilà, allons-y. OK. Tout d'abord, je vais le mettre ici avec une virgule. OK. Et nous devons le formater un peu, d'accord ? Donc 42 ans, je n'ai pas besoin de bretelles bouclées. Ils étaient nécessaires pour le sexe moelleux. Et j'ajouterai deux points. OK, coma. Et là encore, je vais ajouter le côlon et ces bretelles bouclées ne sont pas nécessaires J'ajouterai le coma et ce sera le colon. Les bretelles bouclées ne sont pas nécessaires, puis je vais les aligner C'est fait. C'est bon. Nous avons le profil de John et le profil d'Alice. Maintenant, ce que nous pouvons faire, c'est venir ici, sur la carte de profil. OK, nous devons les passer comme accessoires, ces objets comme accessoires Ce que je peux faire, c'est ajouter une base frisée. Je peux dire trois points et je peux dire le profil d'Alice ici. Et ici, je peux voir trois points et je peux voir le profil de John. Je peux voir si c'est le cas. Maintenant, si vous regardez le résultat, il n'a pas changé. n'y a aucun changement dans la sortie, aucune erreur en tant que telle, d'accord ? Tout est pareil. C'est juste que nous avons amélioré un peu les choses en créant abord des profils pour chaque membre, tout ce que nous voulons transmettre, et en utilisant l'opérateur de spread pour ce composant en particulier. L' opérateur de spread est donc utilisé pour transmettre tous les joueurs clés de l'objet en tant qu'accessoires au composant de la carte de profil Ainsi, au lieu de répertorier chaque accessoire manuellement, vous répartissez l'objet et le composant reçoit la valeur correspondante sous forme d'accessoires C'est bon. Faites glisser les avantages par rapport à l'ancienne approche. Beaucoup de gens préféreraient également l'ancienne approche, mais un code plus propre présente certains avantages. Vous réduisez la réputation et, en gros, vous avez des objets créés maintenant, en fonction des données que vous souhaitez transmettre. Maintenant, cet objet que nous construisons à la volée, n'est-ce pas ? Nous construisons, nous codons en dur toutes les valeurs. Il y aura des scénarios dans lesquels vous obtiendrez cet objet directement depuis l'API. D'accord, vous obtenez des données de l'EPI, vous les convertissez en types d'objets, puis vous les transmettez de cette façon aux accessoires Désolé, pour le composant sous forme d'accessoires. OK. Ne vous y trompez donc pas avec ce type de syntaxe. C'est une seule et même chose, non ? Il fait le même travail. Ce sont juste les différentes manières de faire les choses. OK ? C'est très utile si vous obtenez des données à partir d'un appel EPI ou d'un appel de base de données, puis que vous les avez sous forme d'objets, d'accord ? Ainsi, plutôt que de construire l' ensemble des accessoires manuellement ici, vous suffit d'utiliser l'opérateur de propagation et de le transmettre parce que vous l' obtenez déjà sous forme d'objets Hein ? J'espère donc que cela vous sera utile et j'espère que vous avez pu suivre. 27. Conclusion du cours: C'est la fin de ce voyage passionnant dans le monde des fondamentaux de React. Ensemble, nous avons exploré les concepts fondamentaux de React, depuis la mise en place de votre premier projet, maîtrise de la chaise sX, des composants, accessoires et bien En cours de route, nous avons acquis des compétences pratiques et nous avons même réalisé un projet visant à consolider votre apprentissage Mais n'oubliez pas que ce n'est que le début. React est un outil puissant et très polyvalent offrant des possibilités infinies pour créer des applications Web dynamiques comme vous l'avez compris jusqu'à présent. Je vous encourage à continuer à expérimenter, explorer, à approfondir des sujets et à appliquer ce que vous avez appris à vos propres projets Je suis ravi de voir comment vous utilisez React pour créer des applications incroyables pour votre portefeuille. Qu'il s'agisse d'un projet personnel, mission professionnelle ou autre, n' hésitez pas à utiliser React, qui servira base à une application de grande envergure. Les compétences que vous avez acquises ici vous serviront tremplin pour l'avenir de votre carrière. Merci d'être un groupe d'apprenants si engagés et motivés J'espère que ce cours vous a non seulement enseigné de nouvelles compétences, mais vous a également encouragé à envisager un angle et une dimension complètement différents développement Web sous un angle et une dimension complètement différents. N'oubliez pas non plus de consulter la section projet de ce cours où nous avons un projet que vous pouvez réaliser et partager avec l'ensemble de la classe. Merci de nous avoir rejoint dans cette aventure. Bon codage, tout le meilleur.