Conventions de nommage React : Composants, Props et Hooks
5 min de lecture
React a des conventions de nommage strictes imposées par JSX lui-même — les composants doivent commencer par une majuscule.
Composants : PascalCase
Tous les composants React utilisent PascalCase : UserProfile, ShoppingCart, NavBar. C'est obligatoire — JSX traite les balises en minuscules comme des éléments HTML.
Props : camelCase
Les props utilisent camelCase : userName, isLoading, onSubmit, maxRetries.
Hooks : use + PascalCase
Les hooks personnalisés commencent par use : useAuth, useFetch, useLocalStorage.
Gestionnaires d'événements
Props : on + Événement (onClick, onSubmit). Fonctions gestionnaires : handle + Événement (handleClick, handleSubmit).
Noms de fichiers
| Type | Convention | Exemple |
|---|---|---|
| Composant | PascalCase | UserProfile.tsx |
| Hook | camelCase | useAuth.ts |
| Utilitaire | camelCase | formatDate.ts |
| Style | PascalCase | UserProfile.module.css |
| Test | Comme la source | UserProfile.test.tsx |
Convertir les noms
Convertisseur PascalCase pour les composants, camelCase pour les props, ou le hub.