Collaborer avec l'IA

Maintenant que vous maitrisez les fondamentaux React, apprenons a collaborer avec l'IA specifiquement pour vos projets React.

Valider le code React genere par l'IA

Quand l'IA genere du code React, verifiez ces points :

1. Function components (pas de classes)

// ❌ L'IA a genere une classe ?
class MyComponent extends React.Component {
  render() { return <div>Hello</div>; }
}

// ✅ Corrigez en function component
function MyComponent() {
  return <div>Hello</div>;
}

2. Hooks au top level

// ❌ Hook dans une condition
function Component({ isLoggedIn }) {
  if (isLoggedIn) {
    const [user, setUser] = useState(null); // ❌ Hook conditionnel !
  }
}

// ✅ Hooks toujours en haut du composant
function Component({ isLoggedIn }) {
  const [user, setUser] = useState(null); // ✅ Au top level
  if (!isLoggedIn) return <p>Please login</p>;
  return <p>Hello {user?.name}</p>;
}

3. Immutabilite de l'etat

// ❌ Mutation du tableau original
const addItem = (items, newItem) => {
  items.push(newItem);
  return items;
};

// ✅ Nouveau tableau avec spread
const addItem = (items, newItem) => {
  return [...items, newItem];
};

4. Gestion d'erreur dans les fetch

// ❌ Pas de gestion d'erreur
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));
}, []);

// ✅ Gestion loading + error
useEffect(() => {
  setLoading(true);
  fetch('/api/users')
    .then(res => {
      if (!res.ok) throw new Error('Erreur HTTP');
      return res.json();
    })
    .then(data => {
      setUsers(data);
      setLoading(false);
    })
    .catch(err => {
      setError(err.message);
      setLoading(false);
    });
}, []);

Exemples de prompts pour React

Creer un composant

"Cree un composant React SearchBar avec :
- Un input controle (useState)
- Un bouton clear qui vide l'input
- Une prop onSearch appelee quand on appuie sur Enter
- Destructuration des props"

Deboguer une erreur

"J'ai cette erreur : 'Cannot read property map of undefined'
Voici mon code :
[coller le code]
Qu'est-ce qui cause cette erreur ?"

Creer un custom hook

"Cree un custom hook useLocalStorage qui :
- Prend (key, initialValue) comme parametres
- Retourne [value, setValue] comme useState
- Persiste automatiquement dans localStorage
- Charge la valeur au premier rendu"

Demander une review

"Peux-tu review ce composant React et suggerer des ameliorations ?
[coller le code]
Focus sur :
- Les bonnes pratiques React
- La gestion d'erreur
- La lisibilite"

Ameliorer du code avec l'IA

L'IA est utile pour ameliorer du code existant par iterations :

Iteration 1 : Code fonctionnel

// Votre code qui fonctionne mais manque de gestion d'erreur
function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Prompt : "Ajoute la gestion de loading et error a ce composant"

Iteration 2 : Extraire dans un hook

Prompt : "Extrais la logique de fetch dans un custom hook useFetch"

Iteration 3 : Ajouter une fonctionnalite

Prompt : "Ajoute une barre de recherche pour filtrer les utilisateurs par nom"

Questions a vous poser

Avant d'utiliser du code genere par l'IA :

1. Comprehension

• Est-ce que je comprends ce que fait chaque ligne ?
• Si quelqu'un me demande d'expliquer, je peux ?

2. Qualite

• Le code suit-il les bonnes pratiques React ?
• Y a-t-il des mutations directes d'objets/tableaux ?
• Les hooks respectent-ils les regles (top level, pas conditionnel) ?

3. Adaptation

• Puis-je adapter ce code a mes besoins ?
• Que faire si j'ai un bug ?

Recapitulatif