# Composants modulaires

**Résumé express :** Transformer les cartes en composants réutilisables avec propriétés personnalisables pour optimiser la maintenance et la lisibilité du code.

---

## Problématique : Code difficile à maintenir

Avec la structure actuelle, nous avons déjà plusieurs éléments qui rendent l'application difficile à maintenir. Si nous devions créer une application plus grande, le code deviendrait rapidement illisible. La solution : créer des **composants réutilisables**.

## Qu'est-ce qu'un composant ?

Les composants sont de petits objets que nous pouvons réutiliser plusieurs fois dans notre application. Par exemple, une carte peut devenir un composant que nous instancions autant de fois que nécessaire.

## 1. Créer le composant Card

### Étapes de création
1. Faire clic droit dans l'explorateur
2. Sélectionner **Component**
3. Nommer le composant "Card"
4. Aller sur la page **main** et copier une carte complète (clic droit → Copy)
5. Retourner dans le composant Card et coller la carte

### Nettoyer la page principale
1. Retourner sur la page **main**
2. Supprimer les deux cartes créées précédemment
3. À la place, ajouter un nouveau bloc
4. Transformer ce bloc en composant **Card** via le sélecteur

## 2. Ajouter des propriétés au composant

### Problème : cartes identiques
Actuellement, toutes nos cartes affichent le même contenu. Pour les personnaliser, nous devons ajouter des **propriétés**.

### Créer une propriété "title"
1. Aller dans le composant **Card**
2. Créer une nouvelle propriété :
    - **Nom** : title
    - **Type** : string
3. Double-cliquer sur le texte du titre de la carte
4. Remplacer le texte par une variable : `{title}`
5. Fermer les accolades

### Configurer la propriété
1. Un champ de propriété apparaît dans l'inspecteur
2. Cliquer sur le champ "title variable"
3. Le lier à la propriété **title**

### Définir une valeur par défaut
Par défaut, la propriété est vide. Pour éviter des titres vides :
1. Dans le composant, définir une valeur par défaut (ex: "Hello")
2. Cette valeur s'affichera si aucune propriété n'est définie

## 3. Utiliser le composant avec différentes propriétés

### Personnaliser chaque instance
1. Retourner sur la page **main**
2. Sélectionner le premier composant Card
3. Dans les propriétés, définir **title** : "À faire"
4. Dupliquer le composant (Ctrl+C / Ctrl+V)
5. Sélectionner le second composant
6. Définir **title** : "En cours"

## 4. Créer le composant CreateButton

### Factoriser le bouton d'ajout
1. Créer un nouveau composant "CreateButton"
2. Copier le bloc bouton depuis la page main
3. Coller dans le composant CreateButton
4. Supprimer l'ancien bouton de la page main
5. Ajouter le composant CreateButton à sa place

## Avantages de cette approche

- **Maintenance facilitée** : modifier un composant met à jour toutes ses instances
- **Code plus lisible** : structure claire et organisée
- **Réutilisabilité** : un composant peut être utilisé partout dans l'application
- **Personnalisation** : chaque instance peut avoir ses propres propriétés

## Préparation pour l'épisode suivant

Dans le prochain épisode, nous verrons comment rendre les cartes encore plus modulaires en gérant les éléments internes (tâches) qui seront des **tableaux d'objets** plutôt que de simples propriétés string.

---

*Prochainement : Gestion avancée des propriétés et tableaux d'objets dans les composants.*