Props et composition
Transmettez des props, définissez des props par défaut avec la déstructuration, comparez composition et héritage, découvrez les modèles children/slots et créez de simples composants de présentation.
Props et composition est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 3 leçons au total.
Vue d’ensemble
Objectif : transmettez des données avec des propriétés, définissez des valeurs par défaut et construisez des interfaces en composant de petits composants.
- Les propriétés transmettent les données aux composants.
- Valeurs par défaut grâce à une déstructuration simple.
- Composition et emplacements pour le contenu enfant.
Transmission de propriétés
Les propriétés sont des entrées en lecture seule. Un parent effectue le rendu d’un enfant et lui fournit des valeurs ; l’enfant les lit dans ses paramètres.
- Ne modifiez pas les propriétés.
- Un nouveau rendu a lieu lorsque les parents modifient leur état ou leurs propriétés.
Propriétés par défaut (version simple)
Donnez des valeurs par défaut aux propriétés en les déstructurant dans la liste des paramètres : function Card({ title = "Untitled" }).
- Les composants restent robustes.
- Vous évitez les vérifications de valeur indéfinie dans le balisage.
La composition plutôt que l’héritage
La composition consiste à construire des interfaces plus grandes à partir d’éléments plus petits (enfants ou emplacements). Préférez-la à l’héritage pour gagner en souplesse et conserver un flux de données clair.
Démonstration : propriétés et contenu enfant
Exemple : transmettez des propriétés, définissez des valeurs par défaut et composez le contenu enfant dans une mise en page de carte simple.
<div id="root"></div>
Présentation réutilisable
Les composants de présentation se concentrent sur la mise en page et l’aspect visuel ; lorsque c’est possible, faites-les dépendre des propriétés et gardez-les sans état pour faciliter leur réutilisation.
- Surface d’API réduite (propriétés uniquement).
- Appliquez le style avec des classes ; évitez les effets secondaires cachés.
Composition ou héritage
Récapitulatif
Récapitulatif : transmettez les données avec des propriétés, définissez des valeurs par défaut sûres et composez le contenu enfant pour créer des interfaces souples et réutilisables ; évitez les hiérarchies fondées sur l’héritage.
Questions Fréquemment Posées
La leçon « Props et composition » est-elle gratuite ?
Oui — le texte complet de « Props et composition » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Props et composition » ?
Transmettez des props, définissez des props par défaut avec la déstructuration, comparez composition et héritage, découvrez les modèles children/slots et créez de simples composants de présentation. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Props et composition » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Transmission des props et modèles de composition
- Props et composition
- Composants de présentation réutilisables