React est une bibliothèque JavaScript qui permet de développer du code front-end en quelques minutes. Elle dispose de méthodes et de fonctions préconstruites pour effectuer certaines tâches. React, en tant que bibliothèque, comprend des termes complexes tels que réconciliation, state, props, etc. Que signifient-ils réellement ?

Dans cet article, vous découvrirez plus simplement ce concept exagéré.

Les composants

Les composants sont des petits bouts de code réutilisables qui renvoient un élément React à rendre sur une page web. Il s’agit d’un groupe de code qui constitue une partie unique de la page web comme les boutons, la barre de navigation, les cartes, etc. Il s’agit d’une fonction JavaScript qui renvoie un élément rendu. Elle accepte des paramètres appelés « Props ». Les composants sont nommés avec une majuscule.

Exemple de composant fonctionnel

Remarque :

Il est recommandé d’utiliser des composants fonctionnels plutôt que des composants basés sur des classes.
Les composants fonctionnels sont souvent appelés composants avec état (statefull) lorsque l’interface utilisateur est mise à jour dynamiquement en raison de la valeur de l’état et non de la valeur de la propriété.
Les composants fonctionnels sont appelés composants sans état lorsqu’ils utilisent la valeur de Prop pour modifier dynamiquement l’interface utilisateur et non la valeur d’état.

JSX

JSX est JavaScript XML, qui nous permet d’écrire du HTML dans React. Il introduit des balises et des attributs de type XML pour créer des éléments React. Il facilite la création de composants React en vous permettant d’écrire du code HTML dans des fichiers .jsx. Au lieu d’utiliser un JavaScript compliqué, JSX rend le code lisible et propre. React DOM utilise la camelCase pour nommer les attributs tels que htmlFor, onClick.

Exemple de JSX

Désormais, TSX est une extension de fichier pour les fichiers TypeScript qui contiennent la syntaxe JSX. Avec TSX, vous pouvez écrire du code à vérification de type avec la syntaxe JSX existante. TypeScript n’est pas un langage différent, c’est juste un surensemble de JavaScript qui ajoute un typage statique optionnel.

Plus simplement, avec les fichiers TSX, vous pouvez écrire des composants React en utilisant à la fois TypeScript et JSX.

Example of TSX

Note : Les fichiers JSX utilisent une extension de fichier .jsx :

Les fichiers JSX utilisent l’extension de fichier .jsx.
Les fichiers TSX utilisent une extension de fichier .tsx.
Le système de types de TypeScript permet de détecter les erreurs potentielles dès le début du développement.

Fragments

Les fragments dans React vous permettent de renvoyer plusieurs éléments à partir d’un composant. Il regroupe la liste des éléments sans créer de nœuds DOM supplémentaires. Il nettoie tous les divs supplémentaires du DOM. Cela permet un rendu rapide de l’interface utilisateur.

Exemple de fragments

Props

« Props » est un mot-clé spécial de React qui désigne les propriétés.Il est utilisé pour transférer des données entre les composants.Le transfert de données est unidirectionnel, c’est-à-dire du composant parent vers le composant enfant.

Exemple de Props

Remarque : Props est en lecture seule, ce qui garantit que les composants enfants ne manipulent pas la valeur provenant du composant parent.

État

Les composants doivent conserver la trace de certaines valeurs lorsque l’utilisateur interagit. Supposons que le bouton de basculement du thème du mode clair/foncé change de valeur (de clair à foncé et vice versa) lorsque l’utilisateur clique sur le bouton. Les composants doivent se souvenir de la valeur actuelle du thème. Dans React, ce type de mémoire spécifique aux composants est appelé state.

L’état est défini à l’aide d’un crochet useState() ; nous y reviendrons plus tard.

Exemple de définition de l’état

Note : C’est toujours une bonne pratique de définir l’état dans un composant de premier niveau pour le partager facilement avec d’autres composants enfants et garantir une source unique de vérité.

Méthodes de cycle de vie

Les méthodes de cycle de vie sont des fonctions spéciales que vous pouvez utiliser dans les classes React pour effectuer des actions à différents stades de l’existence d’un composant.
Ces étapes sont les suivantes :

Le montage : Lorsqu’un composant est créé pour la première fois et inséré dans le DOM.Mise à jour : Lorsque les accessoires ou l’état d’un composant changent, ce qui entraîne un nouveau rendu du composant.
Démontage : Lorsqu’un composant est retiré du DOM.

Pureté

En programmation fonctionnelle, la pureté est atteinte lorsqu’une entrée identique renvoie la même sortie. L’entrée est le seul facteur qui détermine la sortie, alors la fonction est dite pure.

Dans React, un composant est dit pur lorsqu’il retourne la même sortie pour la même entrée (viz props).

Mode strict

Le Strict Mode est une fonctionnalité de développement dans React qui permet des fonctions de sécurité supplémentaires pour améliorer la qualité du code. Il affiche des avertissements concernant les erreurs potentielles et les bogues dans le code. Il enregistre les avertissements dans la console du navigateur.

Exemple de mode strict

Hooks

Les hooks dans React permettent d’utiliser l’état et d’autres fonctionnalités de React sans écrire de composants de classe.
Les hooks sont des fonctions qui permettent d’accéder à la gestion de l’état de React, aux effets de bord et à d’autres fonctionnalités.

Quelques crochets couramment utilisés : useState, useMemo, useRef, etc.

Exemple de hooks

Remarque :

Les hooks ne peuvent être appelés qu’à l’intérieur des composants de la fonction React.
Les crochets ne peuvent être appelés qu’au niveau supérieur d’un composant.
Les crochets ne peuvent pas être conditionnels.

API contextuelle

L’API Contexte est utilisée pour partager des données telles que l’état et les fonctions dans l’arborescence des composants sans transmettre manuellement des éléments à chaque niveau. Elle évite le « prop drilling » en simplifiant la gestion de l’état et en partageant les données à travers le composant. Avec l’API de contexte, les données sont partagées directement avec le composant enfant qui les consommera.

La méthode createContext() est utilisée pour créer un contexte. Cette fonction renvoie un objet contextuel composé de deux éléments : un fournisseur et un consommateur.

Le fournisseur est utilisé pour envelopper la partie de l’arborescence de votre composant où vous souhaitez que le contexte soit disponible. Il accepte une valeur obligatoire prop qui contient les données que vous souhaitez partager avec d’autres composants.

Le Hook useContext est utilisé pour accéder aux données.

Exemple d’API de contexte

Créez un contexte à l’aide de la méthode createContext(). Enveloppez les composants enfants dans le fournisseur de contexte et fournissez la valeur d’état.

Utiliser le Hook useContext pour accéder à la valeur de l’âge.

Note : Le hook useContext est souvent utilisé à la place de Consumer pour plus de lisibilité et de simplicité.N

Listes et clés

Une clé est un type spécial d’attribut pour les éléments de liste dans React. Elle agit comme un identifiant unique pour chaque élément lorsqu’il est mis à jour, supprimé ou ajouté.

Il est déconseillé d’assigner l’index de l’élément comme clé, car si les éléments sont réorganisés, cela affectera le comportement attendu.

Imaginons que vous ayez ajouté 10 articles à votre panier et que chacun d’entre eux ait un index unique comme clé. Vous décidez de retirer le premier et le cinquième article du panier. Lorsque les articles sont retirés, l’indexation change : le deuxième article devient le premier et le sixième article devient le cinquième.

Exemple de listes et de clés

Remarque :
Il est recommandé d’utiliser une chaîne comme « clé » qui identifie de manière unique l’élément dans la liste.
Des bibliothèques tierces comme UUID offrent la possibilité de créer des clés uniques.

Form : Composants contrôlés et non contrôlés

Les formulaires React permettent de collecter et de gérer les données de l’utilisateur mieux que les formulaires HTML traditionnels. Ces formulaires sont construits à l’aide de composants et stockent les entrées de l’utilisateur dans un état. Il existe deux types de composants :

Composants contrôlés
Dans les composants contrôlés, l’état du formulaire est géré par le composant lui-même. C’est l’approche recommandée pour la gestion des données de formulaire dans React. Lorsque l’utilisateur interagit avec le formulaire (par exemple, en tapant dans un champ de saisie), l’état du composant est mis à jour pour refléter les changements.

Exemple de composant contrôlé

Composants non contrôlés
Les composants non contrôlés s’appuient sur le DOM pour gérer les données du formulaire. Le composant ne contrôle pas directement l’état du formulaire, mais il peut accéder aux valeurs en utilisant des méthodes du DOM comme ref.

Exemple de composant non contrôlé

Remarque :

Les composants contrôlés permettent la validation des formulaires car l’entrée de l’utilisateur est instantanément reflétée grâce à l’utilisation de l’état.
La validation de formulaire n’est pas possible dans les composants non contrôlés car l’entrée de l’utilisateur n’est accessible qu’après l’envoi du formulaire.

React Router

Introduction à React Router pour la navigation
Configuration de base et utilisation
Exemple : Création de routes et navigation entre les pages

React Router est une bibliothèque standard pour le routage dans React. Elle permet de naviguer entre les différents composants de l’application React. Elle permet de modifier l’URL du navigateur et de synchroniser l’interface utilisateur avec l’URL. React Router est important pour créer des applications à page unique (SPA) avec des fonctions de navigation.

Vous devez d’abord installer React Router à partir de votre terminal.

Installation de React Router

Exemple de routeur React

Tout d’abord, le contenu est placé dans le . Ensuite, nous définissons des et à l’intérieur de ceux-ci, nous introduisons des pour la navigation. possède un chemin qui spécifie l’URL de la page et un attribut d’élément qui spécifie le composant qui doit être rendu sur le chemin défini.

Remarque :

Une application peut avoir plusieurs .
Les peuvent être imbriquées.
react-router-dom dispose également des composants < Link > et < Outlet > pour la navigation.

Conclusion

La meilleure façon d’apprendre un langage de programmation est de multiplier les projets. Construisez de petits projets et expérimentez les concepts.

Si vous avez trouvé cet article utile, n’oubliez pas de continuer à m’aimer. Jusqu’à la prochaine fois, likez, partagez et apprenez.