Exercices Composants & Props
10 exercices pour maîtriser les props, la destructuration, les valeurs par défaut, children et la composition.
Composant avec props
Tâche : Créez un composant Profil qui reçoit nom, role et ville via props et les affiche dans du JSX.
Destructuration des props
Tâche : Refactorisez ce composant Carte pour déstructurer les props directement dans les paramètres : function Carte({ titre, description, couleur }).
Valeurs par défaut des props
Tâche : Créez un composant Badge avec des valeurs par défaut pour label, couleur et taille directement dans la destructuration.
props.children
Tâche : Créez un composant Panneau qui reçoit titre et children. Affichez le titre dans un header et children dans le corps.
Composition de composants
Tâche : Créez 3 composants distincts (Avatar, StatutBadge, CarteUtilisateur) et composez-les — CarteUtilisateur doit utiliser les deux autres.
Liste de composants avec key
Tâche : Créez un tableau de technologies et affichez-les avec .map() et la prop key unique sur chaque élément.
Props conditionnelles
Tâche : Créez un composant Alerte qui reçoit type ("success", "error", "warning") et adapte sa couleur et icône selon le type — utilisez un ternaire ou un objet de config.
Callbacks via props
Tâche : Créez un composant Bouton qui reçoit texte et onClick comme props, et un composant App qui lui passe une fonction de callback.
PropTypes
Tâche : Déclarez propTypes sur un composant Utilisateur avec au moins une prop isRequired, et des defaultProps.
Architecture complète
Tâche finale : Créez une mini-app "Mes Projets" avec 3 composants imbriqués (ProgressBar, ProjetCard, ProjetList) et un tableau de données rendu avec .map() + key.
Passer le QCM R02