3.15 Devoir 1 temps de pratique react et component basics

Dans cette vidéo pratique, nous mettons en œuvre les notions apprises pour créer deux nouveaux composants : Depenses (qui regroupe tous les DepenseItem) et Card (un composant générique d'apparence avec coins arrondis et ombre portée). C'est un excellent exercice pour consolider les bases des composants et des props.

Composants à créer

• Depenses.js : composant qui contient la liste des dépenses.
• Depenses.css : styles dédiés au composant Depenses.
• Card.js : composant générique avec apparence de carte.
• Card.css : styles partagés (box-shadow, border-radius).
• props.children pour transmettre le contenu interne.

Le composant Card reçoit ses éléments enfants via props.children, ce qui permet de l'utiliser comme un wrapper visuel autour de n'importe quel contenu. On ajoute la possibilité de passer un className additionnel via props.className pour personnaliser le style sans casser les valeurs par défaut (box-shadow, border-radius).

// Card.js
import "./Card.css";

function Card(props) {
  const classes = "card " + props.className;
  return (
    <div className={classes}>{props.children}</div>
  );
}

export default Card;

// Utilisation
<Card className="depenses-item">
  ... contenu ...
</Card>

Card devient alors un composant générique réutilisable partout dans l'application pour donner une apparence de conteneur. Les styles partagés (ombre, arrondi) sont centralisés dans Card.css. Cette approche illustre parfaitement la philosophie de React : composer plusieurs petits composants spécialisés pour construire une interface cohérente. À bientôt pour la suite.