Workflow avec l'IA

L'intelligence artificielle est devenue un outil courant en developpement web. Comme tout outil, il faut savoir l'utiliser correctement.

L'IA comme outil de developpement

Quand utiliser l'IA

Situations ou l'IA est utile :

• Expliquer des concepts React que vous ne comprenez pas
• Generer du code boilerplate (structure de base)
• Suggerer des solutions a des problemes specifiques
• Deboguer des erreurs avec des messages d'erreur precis
• Refactorer du code pour ameliorer la lisibilite
• Proposer des alternatives a votre approche

Situations ou l'IA peut vous induire en erreur :

• Code de securite (authentification, validation)
• Optimisations de performance critiques
• Choix d'architecture majeurs
• Solutions sans contexte de votre projet

Quand consulter la documentation officielle

L'IA est entrainee sur des donnees passees. La documentation officielle est toujours a jour.

Comment prompter efficacement

Mauvais prompts

Trop vague :

"Cree-moi un formulaire"

L'IA ne sait pas quels champs, quelle validation, quel style...

Sans contexte :

"Pourquoi ca ne marche pas ?"

L'IA ne connait pas votre code, votre erreur, votre environnement...

Trop ambitieux :

"Cree-moi une application complete de e-commerce"

Trop complexe, resultat generique et inutilisable.

Bons prompts

Specifique et detaille :

Cree un composant React de formulaire d'inscription avec :
- Champs : email, password, confirmPassword
- Validation :
  * Email doit etre un format valide
  * Password minimum 8 caracteres
  * Les deux passwords doivent correspondre
- Affiche les erreurs sous chaque champ
- Bouton desactive tant que le formulaire n'est pas valide
- Utilise useState pour gerer l'etat

Avec le contexte :

J'ai un composant UserList qui fetch des utilisateurs avec useEffect.
Je veux ajouter :
- Un etat de chargement (loading)
- Une gestion d'erreur (error)
- Un affichage conditionnel selon l'etat

Voici mon code actuel :
[coller le code]

Progressif et cible :

Etape 1 : Cree d'abord la structure du composant ProductCard
Etape 2 : Ensuite on ajoutera l'interaction

Le workflow en 6 etapes

1. Definir le probleme clairement

Avant de demander a l'IA, ecrivez ce que vous voulez accomplir.

Objectif : Creer un hook custom useFetch qui :
- Prend une URL en parametre
- Retourne { data, loading, error }
- Gere les etats de chargement et erreur
- Utilise useEffect pour le fetch

2. Demander l'approche avant le code

Prompt : "Comment structurerais-tu un custom hook useFetch ?
Explique l'approche sans donner le code complet."

Pourquoi ? Vous comprenez la logique avant de voir le code.

3. Obtenir le code

Prompt : "Maintenant, implemente le hook useFetch avec l'approche
que tu as decrite."

4. Revoir le code ligne par ligne

5. Poser des questions

"Pourquoi utilises-tu un tableau vide [] comme dependance de useEffect ?"
"Qu'est-ce qui se passe si l'URL change ?"
"Pourquoi initialiser data a null plutot qu'a un tableau vide ?"

6. Tester et iterer

// Testez avec differents cas
useFetch('/api/users')   // OK
useFetch('invalid-url')  // Erreur ?
useFetch(null)           // Bug ?

Si quelque chose ne va pas, retournez vers l'IA avec le feedback :

"Le hook fonctionne bien, mais il ne gere pas le cas ou l'URL
est null. Comment modifier pour gerer ce cas ?"

Red Flags : quand se mefier

1. Class Components

// ❌ Pattern obsolete
class MyComponent extends React.Component {
  // ...
}

// ✅ Utilisez les function components
function MyComponent() {
  // ...
}

2. Mutation directe de l'etat

// ❌ DANGER !
const addItem = (item) => {
  items.push(item); // Mutation !
  setItems(items);
};

// ✅ Creez un nouveau tableau
const addItem = (item) => {
  setItems([...items, item]);
};

3. var au lieu de const/let

// ❌ Obsolete
var count = 0;

// ✅ Utilisez const ou let
const count = 0;

4. Logique de securite cote client

// ❌ JAMAIS !
if (password === 'admin123') {
  setIsAuthenticated(true);
}

// ✅ Authentification cote serveur
const response = await fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ email, password })
});

Verifier les suggestions de l'IA

Checklist de validation

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

Comprehension

• [ ] Je comprends chaque ligne de code
• [ ] Je peux expliquer ce que fait ce code a quelqu'un
• [ ] Je sais pourquoi cette approche a ete choisie

Bonnes pratiques React

• [ ] Utilise des function components (pas des classes)
• [ ] Les hooks suivent les regles (pas dans des conditions/boucles)
• [ ] Pas de mutation d'etat directe
• [ ] Les dependances de useEffect sont correctes
• [ ] Les keys sont presentes sur les listes

JavaScript

• [ ] const/let (pas de var)
• [ ] Arrow functions quand approprie
• [ ] Destructuration utilisee
• [ ] Template literals pour les strings

Ameliorer progressivement

L'IA peut vous aider a ameliorer du code existant de maniere iterative.

Iteration 1 : Code fonctionnel

function UserList() {
  const [users, setUsers] = useState([]);

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

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

Prompt : "Ce code fonctionne mais il manque la gestion d'erreur et de chargement. Ameliore-le."

Iteration 2 : Avec gestion d'etat

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error}</p>;

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

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

Iteration 3 : Avec custom hook

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');

  if (loading) return <p>Chargement...</p>;
  if (error) return <p>Erreur : {error}</p>;

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

Exercice pratique

Recapitulatif