React.js : composants

Bonjour, je m'appelle Tony, et dans ces leçons, vous apprendrez sur les composants. Dans cette leçon, nous examinerons les fonctions ES6 plus avec JSX pour restituer les composants. Je voulais attirer l'attention sur ce point parce que c'est très important. Dans un scénario réel, vous ne mettriez pas chaque composant sur un dossier, car comme vous pouvez l'imaginer, il peut vite devenir indiscipliné. Ce que nous recherchons pour les applications professionnelles une situation du monde réel ressemble à ceci. Comme vous pouvez le constater, ce n’est plus une structure plate. Tous nos composants se trouvent dans leur propre dossier, appelés composants, et chaque composant a son propre dossier. La structure du dossier est telle que la définition du le composant est dans le fichier JS ou JSX, et la solution de coiffage, si nécessaire, se trouve à l'intérieur d'un Fichier CSS. Or, dans un environnement professionnel, il y aurait aussi être un fichier .test ici ou un fichier .spec, qui contiendrait l'unité essais. Nous n'allons pas nous inquiéter de cela pour l'instant, mais juste pour te dire, si jamais tu vois ça en vrai monde, c’est très probablement à cela que ressembleront les choses. Maintenant, pour nos besoins, ce que nous allons faire, c'est créer une application qui gardera une liste de toutes les choses que nous avons pour nous faire ce jour-là, et nous aurons la possibilité de les retirer de notre liste un par un un alors que nous espérons les terminer. Ce composant particulier sera juste une liste de toutes les tâches que nous avons. Maintenant, nous allons d’abord importer React depuis React. Il est très important. React est un super global. Nous en avons besoin pour le développement de toutes nos applications. Et ici, nous allons avoir notre composant. Le composant que nous construisons s'appelle une liste de tâches, et ça va prendre les trois arguments suivants. Les tâches, fermons ça pour qu'il ne se plaigne pas. Les tâches constituent donc l'ensemble d'enregistrements que nous allons parcourir et sortez les tâches une par une. HandleCheck est une fonction qui va se déclencher lorsque nous case à cocher qui correspond à chacune de nos tâches. Et HandleDelete est une autre fonction qui va se déclencher lorsque nous essayons réellement de supprimer une tâche de notre liste. Maintenant, comment pouvons-nous effectuer un rendu conditionnel dans React ? Nous allons effectuer un rendu conditionnel dans React ne pas utiliser une instruction if -else traditionnelle car le JSX la nomenclature ne le permet pas. Nous allons utiliser une instruction tertiaire. Toi peut-être déjà vu une déclaration tertiaire, et ceci est leur format. Faisons ceci ci-dessus pour ne pas gâcher notre fonction, tout comme un exemple. La condition que nous testons est donc toujours la première. argument dans la structure. Si cette condition s'avère vraie, donc si la partie if de notre affirmation est vraie, c'est la partie du code qui obtient courir. Et si c'est faux, c'est la partie du code qui s'exécute. Nous allons prenez la même chose et étendez-la à notre écosystème React pour fais que ça ressemble à ça. Donc notre le jeu d'enregistrements sera une liste non ordonnée, et si sa longueur est inférieure à un, faisons-en plus humainement lisible et dire que sa longueur est nulle. Le triple égal est super important. Si vous faites un double égal zéro, ça veut dire ça est également égal à cela. Donc, en gros, il compare simplement la valeur, mais ce n'est pas le cas. comparer le type. Mais nous ne sommes pas après caractère zéro. Nous sommes après le numéro zéro. Nous faisons donc toujours un triple égal à des fins de comparaison. Cela rend le type sécurisé. Donc ce que nous allons faire ici, c'est que si rien ne s'affiche, nous allons présenter à l'utilisateur un texte qui leur dit en gros, hé, rien n'est affiché. Il n'y a actuellement rien dans votre agenda. Souhaitez-vous ajouter un événement ? Et si quelque chose s'affiche, et c'est là que les choses deviennent intéressantes, c'est là que nous allons parcourir un jeu d'enregistrements qui nous passons comme premier argument à cette fonction. Voyons à quoi cela ressemble. Icône Supprimer. Importons mes icônes pour qu'il ne se plainne pas. Nous allons faire cela en haut et supprimer notre exemple. Donc, la partie else de notre clause tertiaire maintenant a une fonction de carte. C'est la fonction que nous transmettons à notre fonction map, et ce qu'il fera, c'est qu'il produira du HTML pour nous, ce qui être essentiellement un LI ou un élément de liste pour la liste non ordonnée que nous avons déclaré au tout début. Reculons d'un pas. On y va. Et comme vous pouvez le voir, nous affichons essentiellement cela sous la forme un élément à la fois. Nous pourrons voir à quoi cela ressemble une fois que nous faites-le fonctionner dans la prochaine partie de notre leçon. Comme vous pouvez le voir, nous générons la tâche. Il y a une case à cocher qui correspond à cela. Voici le texte cela dit en fait quelle est la tâche. Et voici le bouton qui nous permet de le supprimer. Encore une fois, nous essayons simplement de conceptualiser la tâche et à quoi ça va ressembler. Nous y jetterons un œil dans la prochaine partie de notre cours. Et enfin, pour chaque composant, nous ne pouvons pas oublier de fais ça. Nous exportons le composant que nous venons de créer, et nous l'exportons par défaut. Maintenant, qu'est-ce que cela signifie que nous exportons cela par défaut ? Cela signifie que lorsque nous allons le consommer à l'intérieur de notre composant d'application qui va contenir le définition pour l'intégralité de notre application, nous allons l'importer comme ça sans le bouclé croisillons. Maintenant, parce que nous l'importons par défaut, nous pouvons vraiment l'appeler tout ce que nous voulons, et ça fonctionnera toujours. Si nous devions l'exporter en tant qu'exportation nommée comme celle-ci, nous pourrions l'importer avec des accolades et seulement spécifiquement par son nom. Vous vous demandez peut-être pourquoi cela n’est pas fait ? Cela semble plus sûr. Eh bien, parce que dans React, nous encapsulons souvent l'objet que nous créé avec d'autres fonctions. Nous y reviendrons plus tard, mais nous pourrions effectivement dire avec quelque chose et lui donner des fonctionnalités supplémentaires, fonctionnalité logique. Mais c'est essentiellement pour cela que nous avons nommé les exportations et les importations ne sont pas effectuées dans React, Next .js, ou tout ce qui dépend de React comme base. Dans notre prochaine leçon, nous examinerons quel composant les accessoires sont, quel est leur but, et comment ils sont utilisés. Merci d'avoir regardé.