React.js : composants de classe

Name: React.js : composants de classe
Author: Tony Davydets

Les composants de classe React sont un concept de base dans React.js qui permet aux développeurs de créer des composants d'interface utilisateur réutilisables…

Preview the first lesson free — get full access to all 1 lessons.

Demander une démo Se connecter

Cours : à la demande

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é.

Fournisseur : Tony Davydets 1 leçon · 10m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Les composants de classe React sont un concept de base dans React.js qui permet aux développeurs de créer des composants d'interface utilisateur réutilisables et dynamiques à l'aide d'une syntaxe basée sur des classes. Ces leçons couvriront la structure et les fonctions du cycle de vie des composants de classe, ainsi que la façon de gérer et d'utiliser les accessoires et l'état de ces composants.

Nous allons approfondir la structure et les fonctions de cycle de vie des composants de classe, y compris le constructeur, la méthode render, componentDidMount, componentDidUpdate et componentWillUnmount. Nous explorerons également comment gérer et utiliser les accessoires et l'état au sein de ces composants, y compris comment transmettre les données des composants parents via les accessoires, et comment mettre à jour l'état des composants en fonction des interactions de l'utilisateur ou d'autres événements.

Nous verrons comment définir et utiliser les accessoires dans nos composants, y compris comment définir les valeurs par défaut et gérer les accessoires manquants ou non valides. Nous discuterons également des meilleures pratiques en matière de dénomination et de composition des accessoires et de la gestion de structures de données complexes.

Ce cours vous donnera une solide compréhension de la façon de créer et de gérer des composants de classe React. Vous serez en mesure d'utiliser efficacement les accessoires et l'état pour créer des interfaces utilisateur dynamiques et interactives.

Ce que vous allez apprendre

Comprendre la structure et les fonctions de cycle de vie des composants de classe (Class Components) React, y compris les méthodes constructor, render, componentDidMount, componentDidUpdate et componentWillUnmount
Gérer et utiliser les props au sein des composants de classe, y compris la transmission de données à partir de composants parents
Définir des valeurs de props par défaut et gérer les props manquantes ou invalides
Gérer et mettre à jour l'état (state) du composant en fonction des interactions de l'utilisateur ou d'autres événements
Appliquer les meilleures pratiques pour la nomination des props, la composition et la gestion des structures de données complexes
Créer des interfaces utilisateur dynamiques et interactives à l'aide des props et de l'état (state)

Points clés à retenir

Les composants de classe React permettent aux développeurs de créer des composants d'interface utilisateur (UI) réutilisables et avec état (stateful) en utilisant une syntaxe basée sur les classes.
Les fonctions de cycle de vie des composants de classe incluent le constructeur, la méthode render, componentDidMount, componentDidUpdate et componentWillUnmount.
Les props sont utilisées pour transmettre des données à partir de composants parents et peuvent inclure des valeurs par défaut ainsi que la gestion des props manquantes ou invalides.
L'état (state) peut être mis à jour en fonction des interactions des utilisateurs ou d'autres événements pour créer des interfaces utilisateur dynamiques et interactives.
Les meilleures pratiques pour les props couvrent la nomination, la composition et la gestion des structures de données complexes.

Foire aux questions

Que couvre ce cours ?

Il couvre la structure et les fonctions de cycle de vie des composants de classe React, y compris le constructeur, la méthode render, componentDidMount, componentDidUpdate et componentWillUnmount, ainsi que la manière de gérer et d'utiliser les props et l'état (state) dans ces composants.

Que serai-je capable de faire après avoir suivi ce cours ?

Vous aurez une solide compréhension de la manière de créer et de gérer des composants de classe React et vous serez en mesure d'utiliser efficacement les props et l'état (state) pour créer des interfaces utilisateur dynamiques et interactives.

Quelles leçons sont incluses ?

Le cours comprend trois leçons : Composants de classe et Fonctions de cycle de vie ; Gestion et Utilisation des Props ; et Gestion et Utilisation de l'État (State).

Sur quelles compétences ce cours se concentre-t-il ?

Il se concentre sur la conception de composants, les bibliothèques de composants, les composants HTML, React JSX, React.js (bibliothèque JavaScript) et les composants d'interface utilisateur (UI).

Comment les props sont-elles traitées dans ce cours ?

Le cours explique comment définir et utiliser les props, définir des valeurs par défaut, gérer les props manquantes ou invalides, et suivre les meilleures pratiques pour la dénomination des props, la composition et la gestion de structures de données complexes.