1Définition

En production, React s'utilise presque toujours à travers un framework (Next.js, React Router, Expo) qui ajoute le routage, le rendu côté serveur et les chargements de données. On y surveille les performances, l'accessibilité, et l'on teste les composants comme un utilisateur.

2Principes fondamentaux

3Exemples pratiques

1render(<Quiz />);2await userEvent.click(screen.getByRole("button", { name: "for" }));3expect(screen.getByText("Bonne réponse !")).toBeInTheDocument();

1// app/lecons/page.tsx — s'exécute sur le serveur2export default async function Page() {3  const lecons = await db.lecons.findMany();4  return <ul>{lecons.map((l) => <li key={l.id}>{l.titre}</li>)}</ul>;5}

4Erreurs courantes

<div onClick={ouvrir}>Ouvrir</div>

<button onClick={ouvrir}>Ouvrir</button>

useMemo partout

Mesurer d'abord (React DevTools Profiler)

5Subtilités à connaître

• ◆Les listes de milliers d'éléments se virtualisent (TanStack Virtual) : seuls les éléments visibles sont rendus.
• ◆Suspense affiche un état de chargement pendant qu'un composant attend ses données ou son code.
• ◆L'hydratation relie le HTML produit par le serveur au JavaScript du client : un rendu différent des deux côtés provoque une erreur.

6Techniques d'expert

// next.config.tsexport default { reactCompiler: true };

7Sur le terrain

• Sys-Code est une application Next.js et React 19 : ce cours tourne dans le même React que le site.
• React sert aussi au mobile (React Native), au bureau (Electron) et même au terminal (Ink).
• Les grandes bibliothèques de composants (Radix, React Aria) fournissent des éléments accessibles prêts à styliser.

8Vérifie ta compréhension