Composants React 101 : Création de pièces d’interface utilisateur réutilisables et faciles à entretenir
Découvrez pourquoi diviser les interfaces utilisateur en petits composants React améliore la réutilisabilité, la lisibilité et la collaboration d’équipe, puis créez votre premier composant fonctionnel.
Un scénario familier pour tout développeur frontend
Imaginez ceci : c’est votre première semaine dans une nouvelle startup.
Votre manager passe par votre bureau et vous dit,
"La page d’accueil doit être prête d’ici vendredi."
Il se compose des sections suivantes :
- Un menu de navigation en haut
- Une grande bannière principale
- Une zone de barre de recherche
- Un espace dédié aux produits phares
- Une section pour les témoignages des clients
- Un tableau des prix
- Un bloc avec les questions fréquentes
- Un formulaire d’inscription à la newsletter
- Un pied de page du site
La tâche semble assez simple.
Vous créez un seul fichier HTML et commencez à construire chaque section dans l’ordre.
D’ici vendredi, tout est terminé.
Tout fonctionne correctement.
Un mois plus tard, le produit a évolué.
L’équipe marketing souhaite un nouveau design pour la bannière.
Les designers retravaillent la barre de navigation.
L’équipe du produit veut ajouter une section pour les différents niveaux de prix.
Les avis des clients doivent désormais s’afficher dynamiquement.
Avant même que vous vous en rendiez compte, ce seul fichier a dépassé les 2 000 lignes.
Localiser un simple bouton devient alors une quête à travers un labyrinthe de code.
Pire encore, modifier discrètement une partie de la page peut endommager complètement quelque chose d’entièrement différent.
Cela vous parle ?
C’est précisément ce problème qui a poussé les développeurs à adopter une approche différente pour créer des interfaces.
Plutôt que de construire une seule page énorme, que diriez-vous de la composer à partir de nombreuses pièces petites et réutilisables ?
Dans React, ces pièces sont appelées composants.
Pourquoi un seul fichier géant finit par ne plus fonctionner
Imaginez une page web typique construite à l’ancienne manière.
Homepage.html
---------------------------------------------------
Navigation
Hero Section
Featured Products
About Us
Testimonials
Pricing
FAQ
Newsletter
Footer
---------------------------------------------------
Chaque élément de la page se trouve à l’intérieur de ce seul fichier.
Au fur et à mesure que le projet grandit, vous remarquerez :
- La taille du fichier continue d’augmenter.
- Travailler en équipe devient plus difficile.
- Rien ne peut vraiment être réutilisé.
- Les bugs apparaissent de plus en plus souvent.
- La maintenance du code devient épuisante.
Regardez maintenant comment React gère la même page.
App
│
├── Navbar
├── Hero
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Testimonials
├── FAQ
└── Footer
Plutôt que de mettre tout le contenu dans un seul fichier, chaque section devient une unité autonome.
Cette approche est connue sous le nom d’Architecture basée sur les composants.
Définition d’un composant React
En essence, un composant n’est rien d’autre qu’un morceau d’interface utilisateur réutilisable.
Vous pouvez l’imaginer comme une fonction JavaScript qui retourne du JSX.
Au lieu de regrouper toute la page dans un seul fichier, on la divise en parties plus petites et ciblées.
Chaque partie s’occupe d’une seule tâche précise.
Par exemple :
La barre de navigation devient une composante à part entière.
Le pied de page en est une autre.
La fiche produit en constitue encore une.
La section du profil utilisateur en fait également une.
On assemble ensuite ces composantes pour former l’application complète.
Le résultat est une base de code bien plus facile à lire, à tester et à maintenir au fil du temps.
Changer sa façon de penser l’interface utilisateur
C’est l’un des changements mentaux les plus importants que vous devrez effectuer en apprenant React.
Cessez de penser en termes de pages entières.
Commencez à penser en termes de pièces individuelles.
Au lieu de vous demander :
"Comment dois-je construire cette page d’accueil ?"
Essayez de demander :
« Quelles parties plus petites se combinent pour former cette page d’accueil ? »
Dès que ce changement de perspective s’impose, React devient beaucoup plus intuitif.
Une comparaison quotidienne
Pensez à l’assemblage d’une ville en LEGO.
Vous ne fabriqueriez pas une brique entièrement nouvelle à chaque fois que vous en avez besoin.
Au lieu de cela, vous utilisez les briques que vous possédez déjà.
D’autres deviennent des fenêtres.
D’autres encore composent des toits.
En mélangeant et en combinant ces briques réutilisables, vous pouvez construire d’innombrables bâtiments différents.
Les composants React fonctionnent exactement de la même manière.
- Sur l’écran de connexion
- Dans une fenêtre modale
- Sur la page de paiement
- Dans la barre de navigation
Vous le créez une seule fois.
Puis vous l’intégrez là où c’est nécessaire.
C’est là la véritable valeur apportée par les composants.
Le raisonnement derrière le modèle de composants de React
React s’appuie sur les composants car ils résolvent des problèmes concrets et pratiques.
1. Réutilisabilité
Créez-le une seule fois.
Réutilisez-le indéfiniment.
Au lieu de recréer vingt fois le même code de bouton, vous définites un seul composant Button que vous insérez partout où c’est nécessaire dans l’application.
2. Lisibilité
Considérez deux scénarios côte à côte.
Un fichier s’étendant sur 2 000 lignes.
Contre...
Vingt fichiers distincts, chacun ayant un but clair et unique.
Lequel préférez-vous reprendre dans six mois ?
Les composants plus petits sont simplement plus faciles à comprendre.
3. Facilité de maintenance
Imaginez un scénario où votre entreprise décide de changer la couleur de son bouton principal.
Si vous n’aviez pas divisé votre interface en composants, ce changement aurait nécessité de rechercher et d’éditer des dizaines de fichiers.
Mais avec un seul composant Button réutilisable, vous effectuez la modification en un seul endroit.
Toute page utilisant ce bouton reflète immédiatement la mise à jour.
4. Collaboration d’équipe
Imaginez cinq développeurs chargés de la même base de code.
Une personne s’occupe du Navbar.
Une autre travaille sur la section Hero.
Un troisième crée les cartes de produits.
Une quatrième travaille sur le pied de page.
Le cinquième développeur a pour tâche d’assembler tous ces éléments ensemble.
Puisque chaque fonctionnalité se trouve dans son propre composant, personne n’a besoin de perturber le travail des autres ou d’attendre que un fichier soit disponible.
C’est précisément ce type de flux de travail parallèle qui explique l’importance capitale des composants au sein des équipes de développement en situation réelle.
Composants fonctionnels
Les bases de code React actuelles reposent presque entièrement sur des composants fonctionnels.
Fondamentalement, un composant fonctionnel n’est rien d’autre qu’une fonction JavaScript qui retourne du JSX.
Voici la version la plus basique que vous pouvez écrire :
function Welcome() {
return <h1>Hello, React!</h1>;
}
À première vue, cela ressemble à une fonction JavaScript ordinaire — car c’en est bien une.
Ce qui la distingue, c’est qu’au lieu de retourner un nombre ou une chaîne de caractères, elle renvoie du JSX, et React utilise ce JSX pour déterminer ce qui doit être affiché à l’écran.
Décortiquons-la étape par étape :
function Welcome()
Ici, nous déclarons une fonction nommée Welcome.
Faites attention à la « W » majuscule au début du nom.
React surveille spécifiquement cette première lettre majuscule pour déterminer si une fonction doit être traitée comme un composant.
Vient ensuite cette ligne :
return <h1>Hello, React!</h1>;
La tâche de la fonction est de retourner du JSX.
Ainsi, chaque fois que React affiche Welcome, c’est ce titre qui apparaît.
C’est tout.
Création de votre premier composant
Lorsqu’un projet commence à se développer, les développeurs attribuent généralement à chaque composant son propre fichier dédié.
Un organisation typique des dossiers peut ressembler à ceci :
src
├── App.jsx
└── components
└── Welcome.jsx
Voici ce qui se trouve à l’intérieur de Welcome.jsx :
function Welcome() {
return <h1>Welcome to React!</h1>;
}
export default Welcome;
Diviser les composants en fichiers distincts permet de maintenir une base de code ordonnée et beaucoup plus facile à naviguer au fur et à mesure qu’elle s’agrandit.
Exportation des composants
Vous vous demandez peut-être à quoi sert cette ligne :
export default Welcome;
Disons que vous venez d’écrire un composant solide et réutilisable.
Tant qu’il se trouve uniquement dans son propre fichier, rien d’autre dans votre application ne peut y accéder.
L’exportation est ce qui le rend utilisable ailleurs.
C’est un peu comme publier un manuscrit.
Une fois qu’il est disponible, n’importe qui peut le lire.
La même logique s’applique ici : une fois que vous exportez un composant, n’importe quel autre fichier de votre projet peut l’importer et l’utiliser.
Il existe d’autres façons d’exporter des composants, que nous aborderons dans une prochaine partie de cette série, mais export default est le choix idéal pour commencer.
Importer des composants
Apportons Welcome dans App.jsx et utilisons-le.
import Welcome from "./components/Welcome";
Cette ligne indique essentiellement à React :
« Prenez le composant
Welcomede ce fichier afin que je puisse l’utiliser ici. »
Lorsqu’il est importé, le le rendre s’avère presque sans effort :
function App() {
return (
<>
<Welcome />
</>
);
}
Examinez de plus près cette partie de la syntaxe :
<Welcome />
Même si Welcome a commencé comme une simple fonction JavaScript, nous pouvons l’utiliser exactement comme une balise HTML native.
C’est l’un des aspects les plus élégants du travail avec React : vos fonctions personnalisées se transforment en blocs de construction réutilisables pour l’interface.
Comment React perçoit un composant
Lorsque React tombe sur cette ligne :
<Welcome />
il ne l’interprète pas comme du markup.
En réalité, ce qui se passe en arrière-plan ressemble plutôt à ceci :
Call the Welcome() function
↓
Receive JSX
↓
Convert JSX
↓
Update the Virtual DOM
↓
Render the UI
En termes simples, chaque composant se résume à un appel de fonction qui renvoie une partie de l’interface.
Dès que cette idée devient claire, les composants ne semblent plus être une sorte de magie particulière.
Règles de nommage
Il existe quelques conventions de nommage à retenir.
Noms qui fonctionnent bien :
- Navbar
- Footer
- Hero
- ProductCard
- UserProfile
Noms à éviter :
- navbar
- footer
- component
- abc
Quel en est le raisonnement ?
React s’appuie sur la capitalisation pour distinguer vos composants personnalisés des balises HTML intégrées.
Prenons cet exemple :
<Navbar />
React interprète cela comme une référence à votre propre composant personnalisé.
Comparez avec :
<div>
que React interprète comme un élément HTML standard intégré.
Choisir des noms clairs et descriptifs est également avantageux lorsque d’autres développeurs doivent lire et comprendre votre code par la suite.
Points clés
Voici un bref résumé de ce qui a été abordé jusqu’à présent.
- Un composant est un élément d’interface utilisateur autonome et réutilisable.
- Créer une application React consiste essentiellement à assembler et combiner des composants.
- Les composants fonctionnels sont de simples fonctions JavaScript qui retournent du JSX.
- Découper une application en composants améliore sa lisibilité, sa réutilisabilité et sa maintenabilité à long terme.
- Un composant bien conçu se concentre sur l’exécution d’une seule tâche.
- Il est courant de placer chaque composant dans son propre fichier et de l’importer là où il est nécessaire.
- L’usage des majuscules permet à React de distinguer vos composants personnalisés des éléments HTML ordinaires.
Lectures complémentaires
- Construire un modèle mental pour React : Reconciliation, State et Hooks — Découvrez les principes sous-jacents aux concepts fondamentaux de React — reconciliation, composants, props, state et hooks — afin de développer une intuition plutôt que de mémoriser des API.
- Gérer les états UI du monde réel avec le rendering conditionnel de React — Apprenez à créer des interfaces d’authentification, de rôle, de permission, d’état de chargement, d’erreur et d’état vide dans React en utilisant des modèles de rendering conditionnel pratiques.
catch () génère un Error de syntaxe en JavaScript — Apprenez pourquoi une liste vide de paramètres catch perturbe complètement l’analyse du JavaScript, et découvrez les deux manières grammaticalement correctes d’écrire un bloc catch sans paramètres.