React.js : composants

Name: React.js : composants
Author: Tony Davydets

Ce module couvrira les fonctions ES6+ avec JSX pour le rendu des composants, les Props des composants et l'état des composants, qui sont des concepts…

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 · 18m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce module couvrira les fonctions ES6+ avec JSX pour le rendu des composants, les Props des composants et l'état des composants, qui sont des concepts fondamentaux de React, une bibliothèque JavaScript populaire pour la construction d'applications web modernes.

Les composants React sont les éléments constitutifs d'une application React. Ces composants peuvent être écrits en tant que fonctions ES6+ avec JSX, ce qui permet aux développeurs d'écrire du code plus concis et lisible. JSX est une extension de syntaxe pour JavaScript qui permet d'écrire des éléments de type HTML dans du code. Avec JSX, les développeurs peuvent créer des composants personnalisés qui peuvent être rendus au DOM. L'état est une fonctionnalité qui permet aux composants React de stocker des données qui peuvent changer au fil du temps. Cela permet des mises à jour dynamiques et interactives des données d'un composant. L'état peut être initialisé dans un constructeur ou à l'aide d'un crochet « hook » d'état, une fonctionnalité introduite dans React 16.8.

Comprendre les fonctions ES6+ avec JSX, les props des composant et l'état des composants est essentiel pour créer des applications Web modernes à l'aide de React. Ces concepts permettent des composants réutilisables et interactifs qui peuvent être personnalisés avec différentes données.

Ce que vous allez apprendre

Utiliser les fonctions ES6+ avec JSX pour rendre les composants React
Écrire la syntaxe JSX pour créer des composants personnalisés rendus dans le DOM
Passer des données aux composants en utilisant les props de composants
Gérer l'état du composant pour stocker des données qui changent au fil du temps
Initialiser l'état dans un constructeur ou avec le hook d'état (state hook) introduit dans React 16.8

Points clés à retenir

Les composants React sont les éléments constitutifs d'une application React et peuvent être écrits sous forme de fonctions ES6+ avec JSX.
JSX est une extension de syntaxe pour JavaScript qui permet d'écrire des éléments de type HTML dans le code.
L'état (state) permet aux composants React de stocker des données qui peuvent changer au fil du temps, ce qui permet des mises à jour dynamiques et interactives.
L'état peut être initialisé dans un constructeur ou en utilisant un hook d'état (state hook), une fonctionnalité introduite dans React 16.8.
Comprendre les fonctions ES6+ avec JSX, les props de composants et l'état des composants permet de créer des composants réutilisables et interactifs qui peuvent être personnalisés avec différentes données.

Foire aux questions

Que couvre ce module React.js ?

Ce module couvre les fonctions ES6+ avec JSX pour le rendu des composants, les props des composants et l'état des composants, qui sont des concepts fondamentaux dans React, une bibliothèque JavaScript pour la création d'applications web modernes.

Qu'est-ce que JSX dans React ?

JSX est une extension de la syntaxe de JavaScript qui permet d'écrire des éléments de type HTML dans le code. Avec JSX, les développeurs peuvent créer des composants personnalisés qui peuvent être rendus dans le DOM.

Comment l'état peut-il être défini dans un composant React ?

L'état peut être initialisé dans un constructeur ou en utilisant un hook d'état (state hook), une fonctionnalité introduite dans React 16.8. L'état permet aux composants de stocker des données qui peuvent changer avec le temps.

Pourquoi les props et l'état des composants sont-ils importants ?

La compréhension des fonctions ES6+ avec JSX, des props de composants et de l'état (state) de composants est essentielle pour construire des applications web modernes avec React, permettant de créer des composants réutilisables et interactifs qui peuvent être personnalisés avec des données différentes.

Quelles leçons sont incluses dans ce module ?

Le module comprend trois leçons : Fonctions ES6+ Avec JSX pour Rendre des Composants, Les Props de Composants, et L'État des Composants.