Développement web full-stack (React & Node)

Qui fait quoi

Le navigateur exécute l'interface : il affiche, écoute les clics, valide sommairement les saisies. Le serveur détient la vérité : il vérifie les droits, applique les règles métier et parle à la base de données. Cette frontière est une règle de sécurité, pas un choix esthétique — tout ce qui tourne dans le navigateur est modifiable par l'utilisateur.

Le contrat entre les deux est l'API : une liste d'URL, de méthodes HTTP et de formats JSON. On l'écrit avant de coder.

Le contrat de notre fil rouge

• GET /api/tasks → liste des tâches de l'utilisateur connecté
• POST /api/tasks (corps { title }) → crée une tâche, renvoie l'objet créé
• PATCH /api/tasks/:id (corps { done }) → met à jour
• DELETE /api/tasks/:id → supprime

Quatre routes suffisent pour l'application entière. Chaque leçon en implémentera une couche.

Composant et état local

Un composant React est une fonction qui reçoit des props et renvoie du JSX. L'état (useState) est la mémoire du composant : quand il change, React réaffiche.

```jsx

function TaskForm({ onAdd }) {

const [title, setTitle] = useState('');

return (

<form onSubmit={(e) => { e.preventDefault(); if (!title.trim()) return; onAdd(title.trim()); setTitle(''); }}>

<input value={title} onChange={(e) => setTitle(e.target.value)} />

<button type="submit">Ajouter</button>

</form>

);

}

```

Trois principes à respecter tout de suite

1. L'état vit au niveau le plus haut qui en a besoin, et descend par props. Deux copies du même état finissent toujours par diverger.
2. On ne modifie jamais l'état en place : setTasks([...tasks, nouvelle]) et non tasks.push(nouvelle), sinon React ne détecte pas le changement.
3. Chaque élément d'une liste a une key stable issue des données (l'identifiant de la base), jamais l'index du tableau.

Erreurs fréquentes de débutant

Oublier e.preventDefault() dans un formulaire, ce qui recharge la page et donne l'illusion d'une perte de données ; ou déclarer un état pour une valeur entièrement calculable à partir d'un autre état, ce qui crée deux sources de vérité.

À toi de jouer

Écris le composant TaskList qui reçoit tasks et onToggle, affiche chaque titre avec une case à cocher, et barre les tâches terminées.

Corrigé

On mappe le tableau avec une key issue de task.id, une case cochée par checked={task.done} et onChange={() => onToggle(task.id)}, et un style conditionnel de type textDecoration: task.done ? 'line-through' : 'none'. Le composant ne contient aucun état : il est entièrement piloté par ses props, ce qui le rend trivial à tester.