Axe 7 — Frameworks frontend

🎯 Objectif global : construire des applications web ambitieuses avec un framework moderne, en choisissant lucidement entre rendu côté client, serveur, statique et edge.

Prérequis

• Phase 1 de l’axe 6 (sous-axes 6.1 à 6.3) indispensable : JS moderne, async/await, APIs navigateur.
• TypeScript (6.4) n’est pas bloquant pour démarrer cet axe — tu peux faire React/Vue en JS pur, et revenir sur 6.4 après quelques semaines de pratique. La plupart des exemples de cet axe sont en TS, mais tu peux les lire et les comprendre avec une base JS solide.

Objectifs

À l'issue de cet axe, tu sauras :

• Comprendre virtual DOM, fine-grained reactivity, et islands architecture
• Maîtriser React (hooks, RSC, Suspense) ou Vue/Svelte au choix
• Construire une application Next.js avec SSR, SSG, ISR et route handlers
• Choisir entre TanStack Query, Zustand, Redux Toolkit pour l'état
• Tester des composants avec Testing Library et des E2E avec Playwright

Contenu de l’axe

7.1 — Concepts communs Composants, état, virtual DOM vs fine-grained, cycle de vie, routing, gestion d'état.

7.2 — React JSX, hooks, RSC, Suspense, Server Actions, TanStack Query, RHF + Zod, Vitest + Testing Library.

7.3 — Alternatives Vue 3, Svelte 5, Solid, Qwik, Astro, Angular — comparaison côte à côte avec un même composant.

7.4 — Méta-frameworks Next.js, Nuxt, SvelteKit, Remix ; CSR / SSR / SSG / ISR / Edge ; Server Actions ; middleware.

7.5 — Outils de build Vite, esbuild, SWC, Webpack, Rollup ; tree-shaking, code-splitting, bundle analyzer.

7.6 — Design systems & UI kits Tailwind, shadcn/ui, Radix UI, Headless UI, Storybook, tokens et patterns.

Projet de l’axe

Dashboard Next.js 16 (App Router) — Server Components, Server Actions avec useActionState, middleware d’auth, mode sombre sans FOUC, Tailwind v4, tests Vitest. C’est l’exercice qui fait la jonction entre TS strict, Server-first thinking, et patterns React 19.

📁

Exercice · Dashboard Next.js — Server Components et Server Actions

Pré-requis : Node ≥ 20. Tu construis un mini-dashboard avec auth simulée, mode sombre sans FOUC, et 6 routes (5 statiques + 1 dynamique). Build green vérifié + 2/2 tests Vitest. Capture le piège jsdom matchMedia que tout projet React+Next croise.

📥 Télécharger le canevas squelette à compléter — commence ici 📦 Télécharger la correction solution complète + walkthrough pédagogique

💡 Comment l'utiliser : dézippe le canevas, suis son README.md pour démarrer et tente l'exercice. Quand tu bloques (ou quand tu as fini pour comparer), télécharge la correction — son README.md contient un walkthrough détaillé qui t'explique chaque choix de la solution.

Ressources clés

• react.dev — la doc officielle (excellente)
• Vue.js Guide — vuejs.org/guide
• SvelteKit Tutorial — learn.svelte.dev
• Next.js Docs — nextjs.org/docs
• Patterns.dev — patterns de rendu et de chargement
• shadcn/ui — ui.shadcn.com