Créez un composant ProfileCard qui affiche une carte de profil utilisateur.

Props attendues (avec TypeScript) :

• name : string (requis)
• bio : string (requis)
• avatarUrl : string (requis)
• isOnline : boolean (optionnel, par défaut false)

Affichage :

• Image de profil (80x80px)
• Nom en titre
• Biographie
• Badge "🟢 En ligne" uniquement si isOnline est true

Utilisation :

<ProfileCard
name="Alice Dupont"
bio="Développeuse frontend"
avatarUrl="https://i.pravatar.cc/150?img=1"
isOnline={true}
/>

Dans App.tsx : Créez 3 cartes de profil différentes

{isOnline && <span>🟢 En ligne</span>}

Créez un système d'affichage de produits avec filtrage par catégorie.

Données de test :

interface Product {
id: number;
name: string;
price: number;
category: 'electronics' | 'clothing' | 'books';
}

const products: Product[] = [
{ id: 1, name: 'Laptop', price: 999, category: 'electronics' },
{ id: 2, name: 'T-shirt', price: 29, category: 'clothing' },
{ id: 3, name: 'Smartphone', price: 699, category: 'electronics' },
{ id: 4, name: 'Roman', price: 15, category: 'books' },
{ id: 5, name: 'Casque audio', price: 149, category: 'electronics' }
];

Composants à créer :

1. ProductCard

• Props : product (objet Product)
• Affiche : nom, prix, catégorie

2. ProductList

• Props : products (tableau), category (string optionnel)
• Filtre par catégorie si fournie
• Affiche "Aucun produit trouvé" si la liste filtrée est vide
• Utilise .map() pour afficher les ProductCard
• N'oubliez pas les keys !

Utilisation :

// Tous les produits
<ProductList products={products} />

// Uniquement l'électronique
<ProductList products={products} category="electronics" />

// Uniquement les vêtements
<ProductList products={products} category="clothing" />

Points importants :

• ✅ Chaque ProductCard doit avoir une key unique (utilisez product.id)
• ✅ Le filtrage doit fonctionner correctement
• ✅ Gérer le cas de liste vide

const filteredProducts = category
  ? products.filter(p => p.category === category)
  : products;

Créez un dashboard qui gère 4 états différents : loading, error, empty, et success.

Données de test :

interface Stat {
id: number;
title: string;
value: number;
trend: string;
}

const mockData: Stat[] = [
{ id: 1, title: 'Ventes', value: 1234, trend: '+12%' },
{ id: 2, title: 'Utilisateurs', value: 567, trend: '+8%' },
{ id: 3, title: 'Revenus', value: 8910, trend: '-3%' }
];

Composants à créer :

1. StatCard

• Props : stat (objet Stat)
• Affiche : titre, valeur, tendance
• Colore la tendance en vert si positive (+), rouge si négative (-)

2. Dashboard

• Props : loading (boolean), error (string | null), data (Stat[] | null)
• Gère 4 états avec des early returns :

États à gérer :

1. Loading (loading === true) → Affiche "⏳ Chargement des données..."
2. Error (error !== null) → Affiche "❌ Erreur : [message]" + bouton "Réessayer"
3. Empty (data === null ou data.length === 0) → Affiche "📭 Aucune donnée disponible"
4. Success (sinon) → Affiche le titre + grille de StatCard

Tester les 4 états :

// État 1 : Loading
<Dashboard loading={true} error={null} data={null} />

// État 2 : Error
<Dashboard loading={false} error="Connexion impossible" data={null} />

// État 3 : Empty
<Dashboard loading={false} error={null} data={[]} />

// État 4 : Success
<Dashboard loading={false} error={null} data={mockData} />

function Dashboard({ loading, error, data }) {
  if (loading) return <LoadingView />;
  if (error) return <ErrorView error={error} />;
  if (!data || data.length === 0) return <EmptyView />;

  // État success
  return <SuccessView data={data} />;
}

Lisez attentivement les 6 codes suivants. Chacun contient un bug ou une mauvaise pratique React.

Pour chaque code :

1. Identifiez le problème
2. Expliquez pourquoi c'est un bug
3. Proposez la correction

Code 1 : Liste sans keys

const users = ['Alice', 'Bob', 'Charlie'];

return (
<ul>
  {users.map(user => (
    <li>{user}</li>
  ))}
</ul>
);

Questions :

• Quelle erreur s'affiche dans la console ?
• Pourquoi React a-t-il besoin de keys ?
• Comment corriger ce code ?

Code 2 : Filtrage avec .map()

const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 17 },
{ name: 'Charlie', age: 30 }
];

const adults = users.map(user => {
if (user.age >= 18) return <div>{user.name}</div>;
});

return <div>{adults}</div>;

Questions :

• Que contient exactement le tableau adults ?
• Quel est le problème avec cette approche ?
• Quelle méthode devrait être utilisée avant .map() ?

Code 3 : Index comme key

const tasks = [
{ text: 'Apprendre React' },
{ text: 'Faire les exercices' },
{ text: 'Créer un projet' }
];

return (
<ul>
  {tasks.map((task, index) => (
    <li key={index}>{task.text}</li>
  ))}
</ul>
);

Questions :

• Pourquoi utiliser l'index comme key est problématique ?
• Que se passe-t-il si on supprime le 2ème élément ?
• Quelle est la bonne solution ?

Code 4 : Oubli du return

const numbers = [1, 2, 3, 4, 5];

return (
<ul>
  {numbers.map(n => {
    <li>{n}</li>
  })}
</ul>
);

Questions :

• Qu'affiche ce code à l'écran ?
• Quelle est l'erreur ?
• Comment corriger (deux solutions) ?

Code 5 : Props non typées

function UserCard(props) {
return (
  <div>
    <h3>{props.name}</h3>
    <p>{props.age} ans</p>
  </div>
);
}

// Utilisation
<UserCard name="Alice" age="25" />

Questions :

• Quel est le problème avec age="25" ?
• Comment TypeScript peut-il nous aider ?
• Écrivez l'interface correcte pour les props

Code 6 : Condition avec 0

const count = 0;

return (
<div>
  <h1>Messages</h1>
  {count && <p>Vous avez {count} message(s)</p>}
</div>
);

Questions :

• Qu'affiche ce code à l'écran quand count === 0 ?
• Pourquoi React affiche-t-il 0 ?
• Comment corriger ce problème ?